Javascript issue with IE11
Javascript issue with IE11
我的应用程序在IE9之前运行良好,现在当我将其升级到IE11时它停止工作。这是一个示例 html 和 js 。
问题
在第一次运行中,即。加载时效果很好。但是当我选择PDA品牌时,第二个下拉菜单的所有选项都变为空白。
在控制台中,对象 clonedOptions
上Invalid Calling Object error
出现脚本错误。
function dynamicSelect(id1, id2) {
//alert("Everytime")
// Browser and feature tests to see if there is enough W3C DOM support
// Obtain references to both select boxes
var sel1 = document.getElementById(id1);
var sel2 = document.getElementById(id2);
// Clone the dynamic select box
var clone = sel2.cloneNode(true);
// Obtain references to all cloned options
var clonedOptions = clone.getElementsByTagName("option");
// Onload init: call a generic function to display the related options in the dynamic select box
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
sel1.onchange = function() {
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
};
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
while (sel2.options.length) {
sel2.remove(0);
}
//alert(sel1.options[sel1.selectedIndex].value)
// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
var pattern1 = /( |^)(select)( |$)/;
var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
// Iterate through all cloned options
//alert(clonedOptions.length);
for (var i = 0; i < clonedOptions.length; i++) {
// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
// Clone the option from the hidden option pool and append it to the dynamic select box
//alert("Did match")
sel2.appendChild(clonedOptions[i].cloneNode(true));
//alert(sel2.options[1]);
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>dynamic selectbox example</title>
<script type="text/javascript" src="unobtrusivedynamicselect_ex5.js"></script>
</head>
<body>
<form action="#">
<div>
<select id="pda-brand">
<option value="select">Select PDA brand...</option>
<option value="dell">Dell</option>
<option value="hp">HP</option>
<option value="palmone">PalmOne</option>
</select>
<select id="pda-type">
<option class="select" value="select">Select PDA type...</option>
<option class="dell" value="aximx30">Axim X30</option>
<option class="dell" value="aximx50">Axim X50</option>
<option class="hp" value="ipaqhx2750">iPAQ hx2750</option>
<option class="hp" value="ipaqrx3715">iPAQ rx3715</option>
<option class="hp" value="ipaqrz1710">iPAQ rz1710</option>
<option class="palmone" value="tungstene2">Tungsten E2</option>
<option class="palmone" value="tungstent5">Tungsten T5</option>
<option class="palmone" value="zire72">Zire 72</option>
</select>
<script type="text/javascript">
window.onload = function(e) {
dynamicSelect("pda-brand", "pda-type");
}
</script>
</div>
</form>
</body>
</html>
发行线
在下面的位置中,对于克隆选项,我收到无效调用对象错误。
for (var i = 0; i < clonedOptions.length; i++) {
我认为问题是您正在使用返回实时列表的getElementsByTagName
,这意味着如果从 DOM 中删除一个项目,它也将从列表中删除,因此有资格进行垃圾回收。请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName
返回的列表是实时的,这意味着它会使用 DOM 树自动更新自身。
下面的例子将解释我的意思
var ps = document.body.getElementsByTagName('p');
var ps2 = document.body.querySelectorAll('p');
console.log(ps.length); // 3
document.body.removeChild(ps[0]);
console.log(ps.length); // 2
console.log(ps2.length); // 3
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
我没有最新的IE,但我有一种强烈的感觉,如果你使用clone.querySelectorAll("option")
,你就不会有同样的问题,因为节点将不符合垃圾回收的条件,因为它返回的列表不是实时的。
function dynamicSelect(id1, id2) {
//alert("Everytime")
// Browser and feature tests to see if there is enough W3C DOM support
// Obtain references to both select boxes
var sel1 = document.getElementById(id1);
var sel2 = document.getElementById(id2);
// Clone the dynamic select box
var clone = sel2.cloneNode(true);
// Obtain references to all cloned options
var clonedOptions = clone.querySelectorAll("option");
// Onload init: call a generic function to display the related options in the dynamic select box
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
sel1.onchange = function() {
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
};
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
while (sel2.options.length) {
sel2.remove(0);
}
//alert(sel1.options[sel1.selectedIndex].value)
// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
var pattern1 = /( |^)(select)( |$)/;
var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
// Iterate through all cloned options
//alert(clonedOptions.length);
for (var i = 0; i < clonedOptions.length; i++) {
// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
// Clone the option from the hidden option pool and append it to the dynamic select box
//alert("Did match")
sel2.appendChild(clonedOptions[i].cloneNode(true));
//alert(sel2.options[1]);
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>dynamic selectbox example</title>
<script type="text/javascript" src="unobtrusivedynamicselect_ex5.js"></script>
</head>
<body>
<form action="#">
<div>
<select id="pda-brand">
<option value="select">Select PDA brand...</option>
<option value="dell">Dell</option>
<option value="hp">HP</option>
<option value="palmone">PalmOne</option>
</select>
<select id="pda-type">
<option class="select" value="select">Select PDA type...</option>
<option class="dell" value="aximx30">Axim X30</option>
<option class="dell" value="aximx50">Axim X50</option>
<option class="hp" value="ipaqhx2750">iPAQ hx2750</option>
<option class="hp" value="ipaqrx3715">iPAQ rx3715</option>
<option class="hp" value="ipaqrz1710">iPAQ rz1710</option>
<option class="palmone" value="tungstene2">Tungsten E2</option>
<option class="palmone" value="tungstent5">Tungsten T5</option>
<option class="palmone" value="zire72">Zire 72</option>
</select>
<script type="text/javascript">
window.onload = function(e) {
dynamicSelect("pda-brand", "pda-type");
}
</script>
</div>
</form>
</body>
</html>
我可以在IE-11中使用它,请自己尝试。
根据我的理解,问题是:
var clone = sel2.cloneNode(true);
var clonedOptions = clone.getElementsByTagName("option");
clonedOptions
可能是对标记名称为 option
的clone
子项的引用
sel1.onchange = function() {
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
};
在这个函数中,有一个对clonedOptions
的引用,但没有对clone
的引用。所以clone
可能是垃圾收集的,因为IE找不到任何理由保留它。 clonedOptions
保留对不存在的集合的引用。
你可以用你自己的方式纠正,我只是通过clone
而不是clonedOptions
它对我有用IE11
function dynamicSelect(id1, id2) {
//alert("Everytime")
// Browser and feature tests to see if there is enough W3C DOM support
// Obtain references to both select boxes
var sel1 = document.getElementById(id1);
var sel2 = document.getElementById(id2);
// Clone the dynamic select box // Obtain references to all cloned options
var clone = sel2.cloneNode(true);
// Onload init: call a generic function to display the related options in the dynamic select box
refreshDynamicSelectOptions(sel1, sel2, clone);
// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
sel1.onchange = function() {
refreshDynamicSelectOptions(sel1, sel2, clone);
};
}
function refreshDynamicSelectOptions(sel1, sel2, clone) {
var clonedOptions = clone.getElementsByTagName("option");
while (sel2.options.length) {
sel2.remove(0);
}
//alert(sel1.options[sel1.selectedIndex].value)
// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
var pattern1 = /( |^)(select)( |$)/;
var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
// Iterate through all cloned options
//alert(clonedOptions.length);
for (var i = 0; i < clonedOptions.length; i++) {
// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
// Clone the option from the hidden option pool and append it to the dynamic select box
//alert("Did match")
sel2.appendChild(clonedOptions[i].cloneNode(true));
//alert(sel2.options[1]);
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>dynamic selectbox example</title>
<script type="text/javascript" src="unobtrusivedynamicselect_ex5.js"></script>
</head>
<body>
<form action="#">
<div>
<select id="pda-brand">
<option value="select">Select PDA brand...</option>
<option value="dell">Dell</option>
<option value="hp">HP</option>
<option value="palmone">PalmOne</option>
</select>
<select id="pda-type">
<option class="select" value="select">Select PDA type...</option>
<option class="dell" value="aximx30">Axim X30</option>
<option class="dell" value="aximx50">Axim X50</option>
<option class="hp" value="ipaqhx2750">iPAQ hx2750</option>
<option class="hp" value="ipaqrx3715">iPAQ rx3715</option>
<option class="hp" value="ipaqrz1710">iPAQ rz1710</option>
<option class="palmone" value="tungstene2">Tungsten E2</option>
<option class="palmone" value="tungstent5">Tungsten T5</option>
<option class="palmone" value="zire72">Zire 72</option>
</select>
<script type="text/javascript">
window.onload = function(e) {
dynamicSelect("pda-brand", "pda-type");
}
</script>
</div>
</form>
</body>
</html>
- Fighting with FRP
- issue with FB.Event.subscribe
- geolocation-marker.js conflict with markerclusterer.js
- Angular 2.0 with JavaScript or TypeScript?
- 为什么不推荐使用“with”?是否有更好或其他方法可以“下降”到对象的命名空间
- WebComponentsJS with IE10
- 指令的模板必须只有一个根元素:With restrict E&替换true
- timeago.js with datatable and PHP
- Ajax and Json with Rails
- errors with Javascript try catch
- how to split a string with ','
- Understanding Javascript scope with "var that = this&qu
- IE11中的第二个调用取消了第一个Fetch API调用
- Architecture for CPU intensive tasks with NodeJS & Socke
- How to declare a Map containing certain properties with flow
- Tab键不会't继续chrome/IE11中的表单字段
- 设置'这'在React with Inverse Data Flow中
- IE11 FormData AJAX Post with File 在 401 之后挂起
- Javascript issue with IE11
- IE11 incompatibility with jQuery's 'readonly'?