Firefox中设置iframe src为**.html时onload函数不触发，移除后Chrome无法找到div

嘿，我来帮你拆解下这个跨浏览器的双重坑，刚好之前踩过类似的问题👇

1. Firefox中iframe设置src时onload不触发 #

这个问题通常逃不过两个原因：

• 绑定时机太晚：如果你的src指向的是本地静态HTML这类加载极快的资源，很可能在你绑定onload事件之前，资源就已经加载完了，自然触发不了事件。
• 内联事件的兼容性差异：Firefox对iframe内联onload属性的处理逻辑和Chrome有点不一样，尤其是同源本地文件场景下。

修正方案： #

放弃内联onload，改用JavaScript动态绑定事件，一定要先绑定事件再设置src：

// 先拿到iframe元素（假设你给它加了id="myIframe"）
const iframe = document.getElementById('myIframe');
// 先绑定load事件
iframe.addEventListener('load', function() {
  on_load(this); // 调用你原有的逻辑
});
// 最后再设置src，确保事件不会错过加载完成的时机
iframe.src = "**.html";

2. 移除src后Chrome中找不到指定div #

当iframe没有src时，Chrome会默认加载about:blank，这时候iframe的onload触发得特别早——甚至可能早于主页面的DOM完全渲染完毕。你在on_load里直接用document.getElementById('myuigrid')，主页面的这个div可能还没被创建出来，当然找不到。

另外要确认：如果myuigrid是iframe内部的元素，那你得用iframe的上下文去查找，而不是主页面的document。

修正方案分两种情况： #

情况一：myuigrid是主页面的元素

确保主页面DOM加载完成后再执行逻辑，或者先检查元素是否存在：

function on_load(iframe) {
  // 等待主页面DOM完全加载
  document.addEventListener('DOMContentLoaded', function() {
    var element = document.getElementById('myuigrid');
    if (element) { // 先确认元素存在再往下走
      var scope = angular.element(element).scope();
      if (scope != null) {
        scope.setViewModel(myuigriddata);
      }
    }
  });
}

情况二：myuigrid是iframe内部的元素

切换到iframe的文档上下文去查找：

function on_load(iframe) {
  // 获取iframe内部的文档对象
  var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  // 等待iframe内部DOM加载完成
  iframeDoc.addEventListener('DOMContentLoaded', function() {
    var element = iframeDoc.getElementById('myuigrid');
    if (element) {
      var scope = angular.element(element).scope();
      if (scope != null) {
        scope.setViewModel(myuigriddata);
      }
    }
  });
}

完整修正后的代码示例 #

<!doctype html> 
<html ng-app="app"> 
<head> 
<meta charset="utf-8" /> 
<script type="text/javascript"> 
function on_load(iframe) {
  // 这里以操作主页面元素为例，按需替换成iframe内部元素的逻辑
  document.addEventListener('DOMContentLoaded', function() {
    var element = document.getElementById('myuigrid');
    if (element) {
      var scope = angular.element(element).scope();
      if (scope != null) {
        scope.setViewModel(myuigriddata);
      }
    }
  });
}

// 主页面加载完成后再处理iframe的事件绑定
document.addEventListener('DOMContentLoaded', function() {
  const iframe = document.getElementById('myIframe');
  // 先绑定事件再设置src（如果需要的话）
  iframe.addEventListener('load', function() {
    on_load(this);
  });
  // 注释掉下面这行就是移除src的场景
  // iframe.src = "**.html";
});
</script> 
</head> 
<body>
<!-- 你的iframe元素 -->
<iframe id="myIframe"></iframe>
<!-- 主页面的目标div -->
<div id="myuigrid"></div>
</body>
</html>

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