我们在从 iframe 向选择元素添加选项时遇到问题。该代码在 Chrome、Firefox 和 Opera 中运行良好,但在 IE11 中,当尝试从父窗口访问最近创建的选项时,我们会收到“SCRIPT70:权限被拒绝”。
我们需要的是将选项添加到从列表中选择它们的选择元素。该列表显示在灯箱(带有 iframe)中,当选择一个元素时,必须将其添加到选择元素中,然后关闭灯箱(并且破坏 iframe)。我们所拥有的是这样的(简化的):
父窗口:
<select id="dropdown">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<!-- in the real code, this iframe is shown when a button is pressed -->
<iframe src="iframe.html"></iframe>
<script>
$(document).ready(function() {
$('#dropdown').on('change', function() {
console.log($(this).children().last().val());
});
});
</script>
和 iframe.html:
<a href="#" data-val="4">Add 4</a>
<a href="#" data-val="5">Add 5</a>
<a href="#" data-val="6">Add 6</a>
<script>
$(document).ready(function() {
$('a').on('click', function() {
var p = window.parent;
if(p) {
var dropdown = p.document.getElementById('dropdown');
if(dropdown) {
var opt = new Option($(this).data('val'), $(this).data('val'));
dropdown.options[dropdown.options.length] = opt;
//close self
$('iframe', p.document).remove();
}
}
});
});
</script>
如果您选择 iframe 的任何项目,该选项将添加到选择元素中,并且 iframe 将被销毁。现在,如果您访问附加到 select 元素的 onchange 事件中最近添加的选项,您会收到“SCRIPT70:权限被拒绝”。最奇怪的是,第一次触发事件时它不会发生。你需要触发 onchange 事件至少两次才能得到错误.
你可以看到一个工作小提琴 http://jsfiddle.net/lucas29252/2psMW/
Solution
如果我们改变选项添加到 select 元素的方式它就像一个魅力 http://jsfiddle.net/lucas29252/2psMW/2/.
//dropdown.options[dropdown.options.length] = opt;
dropdown.appendChild(opt);
其他不会引发错误的场景
- 如果 iframe 没有被破坏,而是隐藏了 http://jsfiddle.net/lucas29252/2psMW/3/
-
如果在附加到另一个对象的事件中访问该选项 http://jsfiddle.net/lucas29252/2psMW/4/(即锚点的 onclick 事件)
问题
我希望有人(也许是 IE 团队的一些 Microsoft 员工)可以解释这种奇怪行为的细节。