Microsoft Edge同域名环境下无法访问iframe元素问题求助

问题修复方案 #

1 首个低级错误：ID选择器不匹配

你定义的iframe元素ID为myIFrame，但jQuery选择器里写的是#iviFrame1、#quizIFrame，和实际ID完全不对应，自然无法选中iframe元素绑定事件、获取内部DOM。

2 常见限制：同源策略校验

浏览器出于安全规则，要求父页面和iframe加载的页面必须满足同协议、同域名、同端口，才允许父页访问iframe内部DOM。如果是本地直接用file://协议打开html文件、或者iframe指向的是外部站点，都会触发跨域限制，导致操作失效，建议用本地静态服务（比如VSCode的Live Server插件、本地nginx）启动项目测试。

修复后可用代码 #

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- iframe保持原ID -->
<iframe id="myIFrame" src='test/button.html' width="80%" height="600"></iframe>

<script>
    $(document).ready(function () {
        // 绑定正确ID的iframe的load事件，必须等iframe加载完成再操作内部DOM
        $("#myIFrame").on("load", function () {
            // 缓存iframe内容对象，减少重复查询开销
            const $iframeContent = $(this).contents();
            // 绑定按钮点击事件
            $iframeContent.find("button").on("click", function () {
                // 这里直接用$(this)指向当前点击的按钮即可，不需要再全局查询
                $(this).css("background-color", "red");
            });
        });
    });
</script>

其他排查点 #

• 确认test/button.html路径正确，没有404加载失败的问题
• 如果iframe内的button是动态渲染生成的，需要改成事件委托写法避免绑定失效：

  $iframeContent.find('body').on('click', 'button', function() {
    $(this).css('background-color', 'red');
  })
  

• 不要用父页面的ready事件代替iframe的load事件，父页面DOM加载完成时，iframe内部资源大概率还没加载完成，此时无法获取到内部DOM。

内容的提问来源于stack exchange，提问作者Sourav Dutt