`

如何在框架(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孰是孰非也就很难说清楚了,只是辛苦了我们这些写程序的,现在大家明白怎么回事儿也就行了


附件为例子
分享到:
评论

相关推荐

    一个页面元素appendchild追加到另一个页面元素的问题

    一般都是自己创建元素然后append到页面的但是如果是页面本身有的元素append到另一个页面元素呢,很多的新手朋友对此问题比较好奇,本人也是如此啊,好了不多说,切入主题,感兴趣的朋友可以了解下哦

    javascript使用appendChild追加节点实例

    主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下

    js原生appendChild的bug解决心得分享.docx

    js原生appendChild的bug解决心得分享.docx

    初学js插入节点appendChild insertBefore使用方法

    语法:appendChild(newchild) insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild) 相同之处:插入子节点 不同之处:实现原理方法不同。 appendChild方法是在父级...

    appendChild() 或 insertBefore()使用与区别介绍

    document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意...

    javascript appendChild,innerHTML,join性能比较代码

    代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ... <head> <title>appendChild,innerHTML,join</title> [removed]<...– //使用appendChild()方法添加span标签 function AppendD

    路由控制和视图转换框架SPA.zip

    为什么使用SPA 标签:Web框架 分享 window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", ...

    漂亮的后台界面模板框架

    <p><strong>欢迎使用用户管理系统!</strong></p> <p>  个人资料 相册管理 日志管理 留言管理 风格管理 系统管理 帮助信息 <div id="footer">copyright for 865171 by 865171 </body> </...

    无闪烁更新网页内容JS实现

    todo list 无闪烁更新网页的课题比较大。 ... 希望用一个不显示的iframe来承载这个对象。这有点dirty work的感觉。 最终解决方案是 代码如下:var str2DOM... document.body.appendChild(frame); frame.contentDocumen

    详解javascript appendChild()的完整功能

    appendChild()常用功能。 平时我们用appendChild的时候,都是向父级上添加子元素 appendChild的另一个功能是,先把元素从原有父级上删掉,然后添加元素到新的父级。(移除再添加)。 代码说明 <!DOCTYPE ...

    包管理框架pkgcore.zip

    pkgcore 是一个包管理框架。通过使用适当的类插件,pkgcore 就能够允许使用任何底层的库、配置以及格式(underlying repository/config/format);然而它不支持slackware's tgzs 和 Autopackage format;它也只能将 ...

    测试框架Mojito-Dimensions-Base.zip

    Mojito-Dimensions-Base 是用于 Mojito 应用程序中的 A-B 测试框架。 标签:Mojito 分享 window._bd_share_config = { "common": { "bdSnsKey...

    UIWebView的使用代码

    接口,如果为webView添加了delegate对象并实现该接口,那么在webView加载任何一个frame之前都会delegate对象的该方法,该方法的返回值用以控制是否允许加载目标链接页面的内容,返回YES将直接加载内容,NO则反之。...

    面向对象的javascript框架modulejs.zip

    modulejs是极致模块化的且面向对象的javascript框架,modulejs能让你在简单易用的前提下写出更佳维护性和可重用性的javascript代码。 标签:modulejs 分享 ...

    JS中appendChild追加子节点无效的解决方法

    主要给大家介绍了关于JS中appendChild追加子节点无效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习

    为现代应用而写的PHP框架Pagon.zip

    标签:Pagon Web框架 分享 window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": [], ...

Global site tag (gtag.js) - Google Analytics