关键字:IE6, appendChild, 参数无效,DIV, iframe
问题背景:
在一个iframe结构WEB页面,给弹出的窗口添加一个div。
结果在IE6下总是报:参数无效。IE7+ OK
注:窗口是Ext.Window
参考解决方案:
=======================================================================
http://bbs.csdn.net/topics/340214383
iframe里是另外一个document树。所以把一个文档里创建的节点移动到另外一个里是会出错的:
详见:http://blog.csdn.net/supNate/archive/2007/03/20/1535738.aspx
为什么框架(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孰是孰非也就很难说清楚了,只是辛苦了我们这些写程序的,现在大家明白怎么回事儿也就行了。
=======================================================================
个人问题解决:
问题发生时,一直是:this.mask = document.createElement("div");
因为是弹出窗口,且已脱离了parent的document,所以这时应该在弹窗的document里创建这个节点,故改成:top.document.createElement("div");这样再.body.appendChild(this.mask);就对了。
分享到:
相关推荐
主要给大家介绍了关于JS中appendChild追加子节点无效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
js原生appendChild的bug解决心得分享.docx
而使用appendChild方法增加列,显示结果的先后顺序与程序执行的先后顺序相同 详细可以执行以下代码: 代码如下:<html> [removed]<!– function generatable(){ var tableObje = document.getElementById(...
NULL 博文链接:https://penghuaiyi.iteye.com/blog/579357
appendChild定义appendChild(newChild: Node) : NodeAppends a node to the childNodes array for the node.Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+添加一个节点到指定的节点的...
以上代码在ie8兼容模式和ff6下都没有总是,但在ie8不兼容模式下不起作用,只有在appendChild后,再设置checked的值就都起作用,如下: 代码如下: var chk = document.createElement(“input”)
appendChild()常用功能。 平时我们用appendChild的时候,都是向父级上添加子元素 appendChild的另一个功能是,先把元素从原有父级上删掉,然后添加元素到新的父级。(移除再添加)。 代码说明 <!DOCTYPE ...
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ... <head> <title>appendChild,innerHTML,join</title> [removed]<...– //使用appendChild()方法添加span标签 function AppendD
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild) insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore...
很多新手朋友们对append和appendTo的区别以及js中的appendChild用法有所模糊,下面就举例为大家详细介绍下,感兴趣的朋友不要错过
走马灯效果代码js appendChild实现的无缝滚动
主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下
js中AppendChild与insertBefore的用法详细解析.docx
本篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的对比。需要的朋友可以过来参考下,希望对大家有所帮助
appendChild主要是用来追加节点插入到最后;循环的时候由于不停的搬家导致length 在改变,改用for的话开始的length已经被固定,问题就解决啦
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意...
element.appendChild(newNode) 方法中,如果 newNode本身是Dom中的一个节点. 那么appendChild方法执行的不再 是append操作了,而是一个move操作. 比如说: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]因为...