Chrome Safari Firefox 中 IFRAME 元素在文档树中发生变化后父子页面间的某些交互方式会失效

最新推荐文章于 2026-06-16 20:27:49 发布
原创 最新推荐文章于 2026-06-16 20:27:49 发布 · 1.2k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#iframe #文档 #safari #firefox #chrome
#div
本文通过具体测试案例，分析了不同浏览器环境下IFRAME元素移动前后对其内部页面交互的影响，探讨了window.frames与contentWindow两种方法的兼容性。

window 对象中的 frames 集合可以返回当前 window 中的子框架列表，这是一个类似数组的集合对象。可以通过整型下标或者子框架元素的 name 属性获取到该集合内对应的子框架 window 对象。

IFRAME 元素对应的 DOM 对象为 HTMLIframeElement，各浏览器均支持 HTMLIframeElement 接口中的 contentWindow 属性，这个属性返回 IFRAME 引入子页面的 window 对象。

假设在当前父页面中存在一个 id 和 name 属性为 "ifr" 的 IFRAME 对象，则可以通过 window.frames["ifr"] 或者 document.getElementById("ifr").contentWindow 这两组方法获取到 IFRAME 引入页面的 window 对象。这两种方法在所有主流浏览器中均有很好的兼容性。但是却并不符合 W3C 规范。其中 window.frames 集合算 DOM Level 0 范畴，而 contentWindow 属性为 IE5.5 引入。

 

 

 

 

下面分 4 种情况测试当 IFRAME 元素在文档树中发生变化对 IFRAME 内外的子页面与父页面交互的影响。

  1. window.onload 之前，通过 innerHTML 方法改变 IFRAME 元素在文档树中的位置：main1.html。
  2. window.onload 之前，通过 removeChild、AppendChild 方法改变 IFRAME 元素在文档树中的位置：main2.html。
  3. window.onload 之后，通过 innerHTML 方法改变 IFRAME 元素在文档树中的位置：main3.html。
  4. window.onload 之后，通过 removeChild、AppendChild 方法改变 IFRAME 元素在文档树中的位置：main4.html。

测试代码如下：

main1.html 
<style>
    iframe { width:450px; height:1800px; }
</style>
before window.onload, innerHTML
<div id="div1">
    <iframe id="ifr1" name="ifr1" src="sub.html"></iframe>
    <iframe id="ifr2" name="ifr2" src="0.html"></iframe>
</div>
<div id="div2">
</div>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    $("div2").innerHTML = $("div1").innerHTML;
    $("div1").innerHTML = "";
</script>
main2.html 
<style>
    iframe { width:450px; height:1800px; }
</style>
before window.onload, appendChild
<div id="div1">
    <iframe id="ifr1" name="ifr1" src="sub.html"></iframe>
    <iframe id="ifr2" name="ifr2" src="0.html"></iframe>
</div>
<div id="div2">
</div>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    var iframe1 = $("div1").children[0];
    var iframe2 = $("div1").children[1];
    $("div1").removeChild(iframe1);
    $("div1").removeChild(iframe2);
    $("div2").appendChild(iframe1);
    $("div2").appendChild(iframe2);
</script>
main3.html 
<style>
    iframe { width:450px; height:1800px; }
</style>
after window.onload, innerHTML
<div id="div1">
    <iframe id="ifr1" name="ifr1" src="sub.html"></iframe>
    <iframe id="ifr2" name="ifr2" src="0.html"></iframe>
</div>
<div id="div2">
</div>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    window.onload = function () {
        $("div2").innerHTML = $("div1").innerHTML;
        $("div1").innerHTML = "";
    }
</script>
main4.html 
<style>
    iframe { width:450px; height:1800px; }
</style>
after window.onload, appendChild
<div id="div1">
    <iframe id="ifr1" name="ifr1" src="sub.html"></iframe>
    <iframe id="ifr2" name="ifr2" src="0.html"></iframe>
</div>
<div id="div2">
</div>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    window.onload = function () {
        var iframe1 = $("div1").children[0];
        var iframe2 = $("div1").children[1];
        $("div1").removeChild(iframe1);
        $("div1").removeChild(iframe2);
        $("div2").appendChild(iframe1);
        $("div2").appendChild(iframe2);
    }
</script>
sub.html 
<html>
<head>
<style>
    * { font:12px Arial; }
    body { margin:0; }
    span { font-weight:bold; }
    .g { color:green; }
    .r { color:red; }
</style>
</head>
<body>
<dl>
<script>
	function myEval (code) {
		var script = document.createElement("script");
		script.text = "var ret =" + code;
		document.body.appendChild(script);
		var x = ret;
		document.body.removeChild(script);
		return x;
	}

    function tryObj (obj_text) {
        var ok = '<span class="g">OK</span>';
        var fail = '<span class="r">FAIL</span>'
        try {
            var f = "";
            var ev = myEval(obj_text);
            try {
            	f = ev.toString();
            } catch(e) {
            	f = "";
            }
            return ev ? ok + " " + f : fail + " " + f;
        } catch(e) {
          return fail + " " + f;
        }
    }

    var arr = [
        'parent',
        'parent.document',
        'parent.document.getElementById("ifr1")',
        'parent.document.getElementById("ifr1").contentWindow',
        'parent.document.getElementById("ifr1").contentWindow.document',
        'parent.document.getElementById("ifr1").contentWindow.history',
        'parent.document.getElementById("ifr1").contentWindow.location',
        'parent.document.getElementById("ifr1").contentWindow.navigator',
        'parent.document.getElementById("ifr1").contentWindow.screen',
        'parent.document.getElementById("ifr1").contentWindow.alert',
        'parent.document.getElementById("ifr2")',
        'parent.document.getElementById("ifr2").contentWindow',
        'parent.document.getElementById("ifr2").contentWindow.document',
        'parent.document.getElementById("ifr2").contentWindow.history',
        'parent.document.getElementById("ifr2").contentWindow.location',
        'parent.document.getElementById("ifr2").contentWindow.navigator',
        'parent.document.getElementById("ifr2").contentWindow.screen',
        'parent.document.getElementById("ifr2").contentWindow.alert',
        'parent.frames',
        'parent.frames["ifr1"]',
        'parent.frames["ifr1"].document',
        'parent.frames["ifr1"].history',
        'parent.frames["ifr1"].location',
        'parent.frames["ifr1"].navigator',
        'parent.frames["ifr1"].screen',
        'parent.frames["ifr1"].alert',
        'parent.frames["ifr2"]',
        'parent.frames["ifr2"].document',
        'parent.frames["ifr2"].history',
        'parent.frames["ifr2"].location',
        'parent.frames["ifr2"].navigator',
        'parent.frames["ifr2"].screen',
        'parent.frames["ifr2"].alert'
    ];
    for (var i in arr) {
        document.write('<dt>' + arr[i] + ':</dt>');
        document.write('<dd>' + tryObj(arr[i]) + '</dd>');
    }
</script>
</dl>
</body>
</html>
0.html 
<html></html>

上面代码中有 4 个主页面 main1.html、main2.html、main3.html、main4.html，分别对应本文分析的 4 中情况，每组代码均包含两个 DIV 元素【div1】与【div2】，其中初始状态【div1】包含 IFRAME 元素【ifr1】及【ifr2】，【div2】中为空。
【ifr1】引入了子页面 "sub.html" ，【ifr2】引入了子页面 "0.html" 。通过 JavaScript 将【div1】中的【ifr1】及【ifr2】移动到【div2】内。但是 4 个主页面采取了不同的移动方式。

子页面中，分别判断了 33 个对象的状态，若存在该对象，则显示“OK" 及对象类型，否则显示 "FAIL" 。

在本地构建 Web 服务器1，将测试代码放入服务器进行测试。

 window.onload 之前，通过 innerHTML 方法改变 IFRAME 元素在文档树中的位置window.onload 之前，通过 removeChild、AppendChild 方法改变 IFRAME 元素在文档树中的位置window.onload 之后，通过 innerHTML 方法改变 IFRAME 元素在文档树中的位置window.onload 之后，通过 removeChild、AppendChild 方法改变 IFRAME 元素在文档树中的位置
IE6 IE7 IE8 OperaFirefoxChrome SafariIE6 IE7 IE8 OperaFirefoxChrome SafariIE6 IE7 IE8 OperaFirefoxChrome SafariIE6 IE7 IE8 OperaFirefoxChrome Safari
parentOKOKOKOKOKOKOKOKOKOKOKOK
parent.documentOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr1")OKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr1").contentWindowOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById( "ifr1") .contentWindow.documentOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr1") .contentWindow.historyOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr1") .contentWindow.locationOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr1") .contentWindow.navigatorOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr1") .contentWindow.screenOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr1") .contentWindow.alertOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr2")OKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr2") .contentWindowOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr2") .contentWindow.documentOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr2") .contentWindow.historyOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr2") .contentWindow.locationOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr2") .contentWindow.navigatorOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr2") .contentWindow.screenOKOKOKOKOKOKOKOKOKOKOKOK
parent.document .getElementById("ifr2") .contentWindow.alertOKOKOKOKOKOKOKOKOKOKOKOK
parent.framesOKOKOKOKOKOKOKOKOKOKOKOK
parent.frames["ifr1"]OKOKOK2OKOKOKOKOKOK2OKOKOK
parent.frames["ifr1"].documentOKOKFAILOKOKOKOKFAILFAILOKFAILOK
parent.frames["ifr1"].historyOKOKFAILOKOKOKOKOKFAILOKOKOK
parent.frames["ifr1"].locationOKOKFAILOKOKOKOKOKFAILOKOKOK
parent.frames["ifr1"].navigatorOKOKFAILOKOKOKOKOKFAILOKOKOK
parent.frames["ifr1"].screenOKOKFAILOKOKOKOKOKFAILOKOKOK
parent.frames["ifr1"].alertOKOKFAILOKOKOKOKOKFAILOKOKOK
parent.frames["ifr2"]OKOKOK2OKOKOKOKOKOK2OKOKOK
parent.frames["ifr2"].documentOKOKFAILOKOKOKOKFAILFAILOKFAILOK
parent.frames["ifr2"].historyOKOKFAILOKOKOKOKOKFAILOKOKOK
parent.frames["ifr2"].locationOKOKFAILOKOKOKOKOKFAILOKOKOK
parent.frames["ifr2"].navigatorOKOKFAILOKOKOKOKOKFAILOKOKOK
parent.frames["ifr2"].screenOKOKFAILOKOKOKOKOKFAILOKOKOK
parent.frames["ifr2"].alertOKOKFAILOKOKOKOKOKFAILOKOKOK

注1. Chrome 中认为本地页面为跨域，IFRAME 元素父子页面之间的脚本交互是不安全的，会在控制台提示错误：Unsafe JavaScript attempt to access frame with URL [XXX] from frame with URL [XXX]. Domains, protocols and ports must match.
注2. 与其他浏览器不同，Chrome 和 Safari 此时虽然返回一个有效对象，但此对象类型不是 [window] 而是 [HTMLIframeElement]。

从上表中的结果可见，通过 document.getElementById("IFRAME").contentWindow 的方式获取 IFRAME 元素引入子页面的 window 对象，各浏览器均没有任何问题。而 window.frames 方式则产生了差异：

 

  1. window.onload 之前，通过 innerHTML 方法改变 IFRAME 元素在文档树中的位置：
    • 在 IE6 IE7 IE8 Firefox Opera 中，子页面均可以获得移动后的【ifr1】及【ifr2】相关对象；
    • 在 Chrome Safari 中，虽然可以获取到父页面的【ifr1】及【ifr2】相关对象，但是与 IE Firfox Opera 中不同，该对象类型为 "HTMLIframeElement" ，而不是 "Window" ，所以该对象的子对象无法获取。
  2. window.onload 之前，通过 removeChild、AppendChild 方法改变 IFRAME 元素在文档树中的位置：
    • 各浏览器中，子页面均可以获得移动后的【ifr1】及【ifr2】相关对象。
  3. window.onload 之后，通过 innerHTML 方法改变 IFRAME 元素在文档树中的位置：
    • 在 IE6 IE7 IE8 Opera 中，子页面均可以获得移动后的【ifr1】及【ifr2】相关对象；
    • 在 Firefox 中，在 window.onload 中移动 IFRAME 却使 IFRAME 的 window 对象中 "document" 对象失效；
    • 在 Chrome Safari 中，虽然可以获取到父页面的【ifr1】及【ifr2】相关对象，但是与 IE Firefox Opera 中不同，该对象类型为 "HTMLIframeElement" ，而不是 "Window" ，所以该对象的子对象无法获取。
  4. window.onload 之后，通过 removeChild、AppendChild 方法改变 IFRAME 元素在文档树中的位置：
    • 在 IE6 IE7 IE8 Opera Chrome Safari 中，子页面均可以获得移动后的【ifr1】及【ifr2】相关对象；
    • 在 Firefox 中，在 window.onload 中移动 IFRAME 却使 IFRAME 的 window 对象中“document" 对象失效。

可见，对于 window.frames 方式，使用情况 2，即 window.onload 之前，通过 removeChild、AppendChild 方法改变 IFRAME 元素在文档树中的位置不会出现兼容性问题。

解决方案

根据上面所得的结果，推荐使用 document.getElementById("IFRAME").contentWindow.document 获取 IFRAME 元素内页面的 document 对象，且对于在文档树中移动位置后的 IFRAME 元素也有很好的兼容性。同时应避免对跨域的父子页面交互。

andyxm
关注
小知识点：iframe 自页面操作父页面,firefox监听事件
cathy_2007的专栏
02-09 2276
一般javascript无法控制页面内部的iframe,而很多情况下,需要在父页面数据变换时同步更新iframe里的内容. 此时可利用javascript的机制,在iframe内部写父页面的js事件.比如,父页面有一TextBox,ID为txtText,当TextBox的值变换时,子页面需要显示这个值.此时可在iframe 页面内输入: parent.document.getElementByID
兼容 iOS 9 Safari 的应用跳转方案探索
juner_ge的专栏
11-30 927
很多做 web 开发的一定遇到过这种需求：点一个链接或按钮时，如果装了应用，就用该应用打开；没装的时候，iOS 跳 App Store 下载，Android 直接下载 apk 包。 在做读读日报的时候，就被这玩意花费了好长时间；然而 iOS 9 发布后，方案又失效了，于是又折腾了我几个小时。 首先做个科普，浏览器是无法知道应用有没有安装的。 应用可以设置一个（或多个）自己能打开自定义 U
Chrome Safari Firefox 中 IFRAME 元素在文档树中发生变化后父子页面间的某些交互方式会失效...
kaoyudu
07-05 204
　　window 对象中的 frames 集合可以返回当前 window 中的子框架列表，这是一个类似数组的集合对象。可以通过整型下标或者子框架元素的 name 属性获取到该集合内对应的子框架 window 对象。 　　IFRAME 元素对应的 DOM 对象为 HTMLIframeElement，各浏览器均支持 HTMLIframeElement 接口中的 contentWindow 属性，这...
Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
dezmg8616的博客
09-10 328
Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法 在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1...
js中chrome无法获取父窗体元素
haizhiyan的博客
07-11 674
问题：js中chrome无法获取父窗体元素。 解决：chrome需要搭建服务器通过http访问，本地file浏览访问不了。出处：http://bbs.csdn.net/topics/390355195?page=1
iframe在ie和firefox中的高度兼容性问题解决
weixin_33827965的博客
06-29 423
1.问题描述： 1 <iframe src="p_photo_cont_iframe.html"name="iframe"width="700"marginwidth="0"*height="150"height="110"marginheight="0"align="middle"scrolling="no"fr...
iframe在iphone6 plus的safari下子页面的宽度不受父页面控制的bug
weixin_34008805的博客
04-06 247
这是想要的效果： 样式设置是iframe外面的宽度为100%，iframe的宽度为父元素的90%，高度为宽度 除以1.6，固定比例， 正常显示就是上面的样子，但是，问题出现在iphone特定手机特定版本的safari浏览器上，在它上面会出现： 这样的情况。检查了一下，发现原因了： 在iframe里面的页面没加载出来之前，iframe的宽和高是正常的，当里面的页面加载完了之后，...
父页面、子页面 获取对象方法总结
weixin_30729609的博客
03-21 190
1. 父页面获取子页面对象 $("#id_iframe").contents().find("#id_button_test"); 2. 子页面获取父页面对象 var $iframe = $(".parentId", parent.document);//对应的javascript版本为:var iframe = window.parent.document.getElem...
CSS如何修复Safari下边框圆角溢出问题_利用background-clip属性修正
m0_58875848的博客
04-21 293
典型场景：按钮用渐变背景 + border-radius: 8px + 实线边框，Safari下四角有尖锐色块不是所有背景都出问题——纯background-color完全正常，只有background-image（含linear-gradient）会溢出加overflow: hidden看似能压住，但会裁掉阴影、伪元素或子元素的圆角效果，副作用大background-clip: padding-box为什么比border-box更安全background-clip控制背景绘制区域。
Spring Boot 文件上传大小限制配置全解析
BADAO_LIUMANG_QIZHI的博客
06-12 353
当客户端上传文件超过服务端限制时，Servlet 容器（Tomcat）直接拒绝请求，返回，请求根本不会到达你的 Controller 代码。
《从存储架构到策略隔离：Chrome隐私防护的硬核实践路径》
xy520521的博客
06-16 308
本文拆解Chrome浏览痕迹删不干净的底层成因，指出常规一键清理仅触达表层可视化数据，数据库空闲页、进程级缓存、系统级索引等多层级残留普遍存在，同时厘清无痕模式、退出自动清理的能力边界与常见认知误区。文章从策略级配置、用户数据目录物理隔离、系统级痕迹补防三个维度给出实操路径，提出从事后清理转向源头阻断的核心思路，明确区分本地隐私防护与网络匿名的技术边界，为全链路浏览隐私防护提供完整的落地框架。
《从渲染参数到真机复核：Chrome移动端适配测试进阶指南》
最新发布
xy520521的博客
06-16 419
本文针对移动端适配测试中普遍存在的“仅缩放窗口”表层测试误区，深入拆解Chrome设备模拟的渲染底层运行机制，覆盖视口层级解析、设备像素比映射、触摸事件模拟、网络节流验证、传感器与横竖屏适配等核心维度。文章同时讲解自定义设备配置、媒体查询断点系统化验证、远程真机调试等高阶实操方法，厘清桌面模拟环境与真实设备的能力边界，提出从模拟快速迭代到真机精准复核的分层测试体系，为构建高效、低遗漏的移动端适配测试流程提供完整的落地思路。
从零搭建 Claude Code + Chrome MCP 浏览器自动化：前端 E2E 端到端测试完整教程（包含增量测试）
cypking的博客
06-15 317
Claude Code + Chrome MCP 前端自动化测试教程 摘要 本教程介绍如何使用Claude Code和Chrome MCP实现零代码前端自动化测试，主要特点： 无需编码：通过自然语言指令驱动测试，无需编写测试脚本 完整功能：支持浏览器操作、表单填写、元素校验、截图、报告生成等 环境配置： 需Node.js≥18 安装Claude Code和Chrome DevTools MCP 配置Chrome MCP连接 核心能力： 基础E2E测试（登录表单测试示例） 增量回归测试（基于Git diff自
《Chrome标签组搭建多任务高效浏览指南》
xy520521的博客
06-13 511
本文针对多任务并行场景下标签页泛滥、查找低效、认知负荷高的普遍痛点，从Chrome标签组的底层运行逻辑切入，打破“仅做视觉分类”的表层认知，解析其对标签进程调度、后台内存节流的深层优化机制。文章系统给出命名颜色编码、分层分级管理、折叠交互节奏、跨窗口任务流转等落地方法，结合原生功能搭建全链路标签处理流程，同时梳理了分组过度、命名模糊等常见使用误区。文末提出标签管理本质是对注意力与工作流的结构化梳理，为高负荷浏览场景提供无需第三方工具的原生高效解决方案。
《Chrome非必要服务的精细化关闭指南》
xy520521的博客
06-14 490
本文针对Chrome版本迭代中功能堆叠带来的隐性性能损耗问题，从后台网络服务、进程架构、扩展权限、闲置标签回收、渲染管线、媒体设备服务、缓存存储等多个维度，系统拆解了非必要默认功能的性能裁剪路径与底层逻辑，提出精细化权限收束、参数调优、渐进式验证的实操方案。文章指出通用软件的默认均衡配置存在大量场景冗余，通过针对性裁撤无用特性、收拢资源开销，可释放可观的运行余量，核心思路是让工具适配个体使用场景，而非被动接受全量功能预设。
破解 Chrome 扩展的「两世界难题」：MV3 下的 ISOLATED 与 MAIN World 桥接之道
技术的学习与积累是个技术活
06-15 403
需求使用哪个 WorldBridge 角色调用ISOLATED消息接收者 / 发送者读取、HookfetchMAIN数据采集 / 页面操作修改页面全局变量或原型链MAIN执行者将页面数据持久化到扩展存储协作MAIN采集 → ISOLATED存储从扩展存储读取配置并应用到页面协作ISOLATED读取 → MAIN应用记住三个核心原则注入两个世界– 通过或让脚本进入 MAIN World。安全通信– 使用令牌 + 来源校验 + schema 验证，防止消息伪造。最小权限。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值