`
dingherry
  • 浏览: 67761 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

IE6下appendChild参数无效

    博客分类:
  • JS
阅读更多
关键字: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);就对了。











分享到:
评论

相关推荐

    谷歌浏览器 insertCell与appendChild的区别

    如果你需要在特定位置插入单元格,还可以传递一个索引作为参数,比如 `rowObj.insertCell(1)` 将在第二个位置插入单元格。 在提供的代码示例中,`generatable` 函数使用了 `insertCell` 方法来创建新的表格行。首先...

    IE8中动态创建script标签onload无效的解决方法

    在IE8中,动态创建`<script>`标签并设置其`onload`事件处理函数时,可能会遇到一个已知的问题,...通过调整加载顺序和监听`readystatechange`事件,可以有效地解决在IE8中动态创建`<script>`标签时`onload`无效的问题。

    动态生成的IFRAME,设置SRC时的问题解决分析

    然而,动态生成的IFRAME在设置`src`属性时,可能会遇到一些问题,尤其是在不同的浏览器环境下,如IE7和IE6。本文主要探讨的是在IE7下,动态设置IFRAME `src`属性时可能遇到的影响和解决方案。 首先,一个基本的动态...

    动态生成的IFRAME,设置SRC时的,不同位置带来的影响

    同样,`scrolling = "no"`在`appendChild`之后无效,而在之前则能阻止滚动条的显示。这表明某些属性的设置必须在IFRAME加入DOM树之前完成,以确保它们能够正确应用。 对于IFRAME的宽高`width`和`height`属性,无论...

    JavaScript Table行定位效果

    给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来...

    动态创建的表格单元格中的事件实现代码

    在其他非IE浏览器中,这个方法无效,所以通常会与`addEventListener`一起使用,以便支持跨浏览器兼容性。 需要注意的是,`attachEvent`方法已经过时,现在的新项目应该优先考虑使用`addEventListener`。如果必须...

    html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

    6. `proxy`: 字符串,用于加载跨域图像的代理URL,如果不设置,跨域图像将无法加载。 7. `taintTest`: 布尔值,是否在绘制图像前检查是否会污染Canvas,默认为`true`。 8. `timeout`: 数字,图像加载的超时时间...

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

    这个函数接受三个参数:`dom`是要在其中插入`iframe`的父元素,`src`是`iframe`要加载的URL,`onload`是加载完成后的回调函数。 接下来,我们讨论如何销毁`iframe`并释放内存。在JavaScript中,直接删除`iframe`...

    table insertRow、deleteRow定义和用法总结

    在IE浏览器中,可以直接调用`table.insertRow()`,但在Firefox等其他遵循W3C标准的浏览器中,需要指定插入位置,即`table.insertRow(-1)`,表示在表格末尾插入新行。此方法接受一个可选参数`index`,用于指定插入新...

Global site tag (gtag.js) - Google Analytics