`

如何在框架(frame)页面之间使用appendChild()?

阅读更多
今天在写程序时遇到一个需求,是需要在一个页面中使用程序改变其中的一个框架页面的DOM结构,于是自然会用到appendChild这样的方法,例如:
var div=document.createElement('div');
window.frames['frameName1'].contentWindow.document.body.appendChild(div);
尽管看上去没有任何问题,实际上在Firefox下它也能正常工作,但在IE下却偏偏不能正确运行,着实很郁闷。第一想法就是是:唉,该死的IE bug还真多!
无奈的开始google:frame+appendChild,希望能找到一些hack方法,倒有很多人建议用innerHTML,这个我也想过,太不方便,很多事件都无法绑定。
继续搜寻……,终于找到一篇文章解决了这个问题,基本意思是这样的:
document表示一个页面DOM结构的根节点,而document.createElement()方法是在document本身的结构中创建一个节点,因此想把一个文档的节点移动到另外一个文档的节点当中去,是不可行的。
呵呵,原来如此啊!这样的解释的确很合乎道理的,上面代码是有点问题,应该用子框架的文档(document)来创建节点:

var doc=window.frames['frameName1'].contentWindow.document;
var div=doc.createElement('div');
doc.body.appendChild(div);
这样在FF和IE下都能正确运行了!

但之前FF下为什么也能运行呢?有两种解释:
1。FF有自己的容错性,就像IE就有很多讨厌的容错性。
2。因为iframe是当前页面的节点,而iframe中的文档自然也认为是父页面的子节点了,只不过具有父页面根结点的所有特征,于是既然框架页面和父页面是在一个根下面,那么节点的互相移动也合乎道理了,呵呵,即使有点勉强,倒也能说的通的!

于是在这个问题上FF和IE孰是孰非也就很难说清楚了,只是辛苦了我们这些写程序的,现在大家明白怎么回事儿也就行了


附件为例子
分享到:
评论

相关推荐

    最简单的动态生成表格并实现不同框架打印

    如果是使用前端框架,只需在模板中定义好表格结构,并在数据变化时自动更新。 3. **框架间通信**:假设TopFrame.html有一个按钮,点击后需要在DownFrame.html的表格中显示数据。在TopFrame.html中,为按钮添加点击...

    ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)

    在iOS和Android平台之间,网页开发常常面临一些兼容性问题,特别是在使用`iframe`元素时。`iframe`,即内联框架,常用于在单一HTML文档中嵌入其他网页内容,实现页面组件的复用。然而,iOS系统对`iframe`的处理方式...

    动态创建iframe,并动态添加js执行代码

    在IT行业中,动态创建iframe和动态添加JavaScript代码是一种常见的技术,尤其在页面加载后需要异步加载内容或者实现跨域通信时。以下是对这个主题的详细讲解。 首先,`iframe`(Inline Frame)是HTML中的一种元素,...

    VB控件WEBBROWSER基本及进阶技巧合集.doc

    当页面包含框架时,可以使用Document.frames或Document.getElementsByTagName("frame")来访问子框架,并进一步操作。 9. **获得浏览器信息**: WebBrowser控件的StatusText属性可以显示浏览器的状态栏信息,...

    springWebsocket的简单例子

    WebSocket是Web交互技术的一种新标准,它允许在服务器和客户端之间建立持久的连接,从而实现双向通信。在本文中,我们将深入探讨如何使用Spring框架,特别是Spring WebSocket,来创建一个简单的WebSocket应用程序。...

    IframeBridge:iframe桥

    IframeBridge 用于在同一个页面中的不同框架之间跨域通信。 比如主页面与嵌入的页面之间通信,方式如下: index.html 文件内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...

    UIWebView使用

    WKWebView使用WebKit框架,提供更快的渲染速度和更好的内存管理,同时支持更多现代Web标准。 六、总结 UIWebView是iOS应用中用于展示网页内容的关键组件。通过学习和实践,开发者可以熟练地将网页内容嵌入到原生...

    ext生成树节点带链接

    在提供的示例代码中,可以看到使用了Yii框架来输出相关路径。例如: ```html <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl;?>/js/resources/css/ext-all.css"/> ...

    javascript 滚动特效

    在滚动特效中,我们需要获取或改变特定元素的位置、样式等属性,如`getElementById`、`getElementsByClassName`、`appendChild`、`style`等。 2. **事件监听**:JavaScript事件监听是响应用户行为或页面状态变化的...

    iframe弹窗工具类

    在网页开发中,`iframe`(Inline Frame)是一种嵌入式框架,允许我们在一个HTML页面中加载另一个HTML页面。这个“iframe弹窗工具类”显然为开发者提供了一种简便的方法来管理和控制`iframe`,确保在不同的浏览器环境...

    cocos2d-html5官方教程2重写代码

    随着框架版本的不断更新,早期教程中的代码可能无法在新版本中直接运行。因此,本篇文档将重点解读重写后的代码,并帮助读者理解如何适配最新版本的cocos2d-html5。 #### 二、重写代码的意义 官方教程2的代码主要...

    动态加载js、css等文件跨iframe实现

    在跨iframe场景中,动态加载文件和DOM元素则更加复杂,因为涉及到不同窗口之间的通信。以下将详细介绍如何在iframe间实现这一功能。 首先,我们来看动态加载JS文件。在JavaScript中,可以使用`createElement`方法...

    轻松学习javascript

    ##### 3.5 桢结构和框架窗口(Frame, IFrame) **桢**(frame)和**内联桢**(iframe)允许在同一个页面中显示多个独立的HTML文档。 - **了解链接的Target属性**:通过设置`target`属性,可以使链接在指定的桢中打开。 ...

    JavaScript的浏览器对象详解

    - `frame`: 引用框架集中的框架。 - `status`: 设置或返回状态栏的文本。 - `location`: 获取或设置当前页面的URL。 - `history`: 访问历史记录。 - `closed`: 检查窗口是否已关闭。 - `parent`: 指向父窗口的对象。...

    spring boot+websocket前后端简单demo

    而WebSocket则是一种在客户端和服务器之间建立长连接的协议,提供双向通信,允许实时数据传输。 首先,我们需要在Spring Boot项目中引入WebSocket支持。在`pom.xml`文件中,添加以下依赖: ```xml <groupId>org....

    spring-boot webScoket 实例

    在本文中,我们将深入探讨如何使用Spring Boot实现WebSocket应用程序,基于描述中的"spring-boot webScoket 实例"。Spring Boot是Java开发者的首选框架,它简化了Spring应用的初始设置,而WebSocket则是一种双向通信...

    springboot-wbsocket-demo.zip

    WebSocket是一种在客户端和服务器之间建立持久连接的协议,允许双方进行全双工通信,即数据可以同时双向传输。相对于传统的HTTP长轮询或 comet 技术,WebSocket提供了一种更加节省资源和高效的实时通信方式。 在...

    iframe如何动态创建及释放其所占内存

    在Web开发中,`iframe`(Inline Frame)是一种嵌入式框架元素,它允许在一个HTML文档内部嵌入另一个HTML文档。这种技术常用于实现页面的模块化,如加载外部资源、广告、视频等内容。然而,不当使用`iframe`可能会...

    html笔记(20220104205800).pdf

    8. HTML框架:和<frame>标签用于创建网页框架,允许在一个浏览器窗口中同时显示多个网页。 9. HTML5新特性:HTML5引入了许多新元素和API,如、、、用于结构性语义化,和用于图形绘制,和处理多媒体内容,离线存储...

Global site tag (gtag.js) - Google Analytics