如何通过JavaScript获取Frame的页面加载耗时？

你说得没错——直接在控制台执行代码时，默认window绑定的是外层主文档，所以无论frame里加载什么页面，拿到的都是主页面的性能计时结果。要通过JavaScript代码直接获取frame内部的性能数据，得先拿到frame对应的window对象，下面分几种场景给你具体方法：

1. 在页面代码中主动获取（同域场景） #

首先确保你的主文档和frame加载的页面同域（浏览器同源策略会阻止跨域访问frame内部对象），然后可以通过frame元素的contentWindow属性访问它的window上下文：

修改你的现有代码： #

先给frame添加一个id方便定位：

<body>
  <script>
    function print(){
      // 获取frame对应的window对象
      const frameWin = document.getElementById('targetFrame').contentWindow;
      // 计算frame页面的DOM加载耗时
      const loadDuration = Number(frameWin.performance.timing.domContentLoadedEventEnd - frameWin.performance.timing.navigationStart);
      console.log('Frame页面加载耗时：', loadDuration);
    }
  </script>
  <frame id="targetFrame" src="myPAGE.html" onload="print()"/>
</body>

因为onload事件是frame加载完成后触发的，这时候frame的性能计时数据已经完全可用，能准确拿到结果。

2. 在控制台手动执行代码 #

如果不想修改页面代码，直接在控制台获取，也可以直接定位到frame的window：

• 通过frames集合索引（如果是页面中第一个frame）：

  const frameLoadTime = frames[0].performance.timing.domContentLoadedEventEnd - frames[0].performance.timing.navigationStart;
  console.log(frameLoadTime);
  

• 通过frame的id定位：

  const frameWin = document.getElementById('targetFrame').contentWindow;
  console.log(frameWin.performance.timing.domContentLoadedEventEnd - frameWin.performance.timing.navigationStart);
  

注意事项与现代API推荐 #

• 跨域限制：如果frame加载的是不同域名的页面，浏览器的同源安全策略会禁止JS代码访问frame的contentWindow.performance，这种情况下只能通过调试器切换目标窗口查看，无法通过代码直接获取。
• 废弃API提示：performance.timing已经被标记为废弃，现代浏览器推荐使用performance.getEntriesByType('navigation')来获取导航性能数据，示例：

  const frameWin = document.getElementById('targetFrame').contentWindow;
  const navEntry = frameWin.performance.getEntriesByType('navigation')[0];
  const loadDuration = navEntry.domContentLoadedEventEnd - navEntry.navigationStart;
  console.log(loadDuration);
  

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