javascript - 脚本 70 : Permission denied when adding options to select element from a recently closed iframe

Question

我们在向 iframe 中的选择元素添加选项时遇到问题。该代码在 Chrome、Firefox 和 Opera 中运行良好，但在 IE11 中，我们在尝试从父窗口访问最近创建的选项时收到“SCRIPT70:权限被拒绝”。

我们需要的是将选项添加到从列表中选择它们的选择元素。 The list is shown in a lightbox (with an iframe) and when an element is chosen, it has to be added to the select element and then the lightbox closed (and the iframe destroyed).我们有这样的东西(简化):

父窗口:

<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:Permision denied”。最奇怪的是，它不会在第一次触发事件时发生。您需要至少触发两次 onchange 事件才能得到错误。

可以看到a working fiddle

解决方案

如果我们改变将选项添加到选择元素的方式 it works like a charm .

//dropdown.options[dropdown.options.length] = opt;
dropdown.appendChild(opt);

其他不报错的场景

• If the iframe isn't destroyed, but hidden
• If the option is accessed in an event attached to another object (即 anchor 的 onclick 事件)

问题

我希望有人(也许是在 IE 团队工作的某些 Microsoft 员工)能够解释这种奇怪行为的细节。

Answer 1

尝试将其放入您的 html 页面中，看看是否有任何不同

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>