`
dingherry
  • 浏览: 67060 次
  • 性别: 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);就对了。











分享到:
评论

相关推荐

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

    然而,在某些情况下,我们可能会遇到`appendChild`追加子节点无效的问题。这个问题通常与DOM操作的规则有关,特别是当尝试将一个节点添加到多个父元素时,会违反DOM结构的一致性。 首先,让我们深入了解一下`...

    兼容ie6/ie7/ie8/ff 省市县的js

    标题“兼容ie6/ie7/ie8/ff 省市县的js”指的是一个JavaScript插件或库,其主要目的是解决浏览器兼容性问题,特别是针对较老版本的Internet Explorer(IE6、IE7、IE8)以及Firefox(FF)。这个选择器功能允许用户在...

    在IE8下用JQuery获取自定义标签

    在IE8中,你需要使用微软特有的`document.createElement('tagname')`方法来创建自定义元素,并使用`appendChild`或`insertBefore`等方法将其添加到DOM树中。 3. **jQuery选择器**: jQuery选择器是用于选取DOM元素...

    IE6/7/8中使用innerHTML清空元素,其子元素也被清空

    4. **避免不必要的innerHTML操作**:在可能的情况下,减少对`innerHTML`的依赖,转而使用DOM操作API,如`createElement`、`appendChild`和`removeChild`等,可以更好地控制DOM树的结构,避免这类问题。 5. **条件...

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

    6. **性能优化**:频繁地使用`appendChild()`可能导致性能下降,尤其是在大量操作时。可以考虑使用`fragment`(文档片段)来批量添加元素,以减少DOM操作次数。 通过上述方法,你可以在框架页面之间有效地使用`...

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

    然而,在某些情况下,如果处理不当,可能会出现预期之外的行为或者错误。本文将基于提供的文档内容,深入探讨`appendChild`在循环使用时可能出现的问题,并提出相应的解决方案。 #### 二、问题分析 文档中提到的...

    网页冬季背景+飘雪效果插件(兼容IE6

    总的来说,这个“网页冬季背景+飘雪效果插件(兼容IE6)”是一个旨在为用户提供怀旧和沉浸式浏览体验的工具,它体现了开发者对老旧浏览器兼容性的关注,以及在技术限制下创造互动效果的巧思。对于希望为网站增添冬季...

    js中AppendChild与insertBefore的用法详细解析.docx

    JavaScript 中的 AppendChild 和 InsertBefore 用法详细解析 在 JavaScript 中,appendChild 和 insertBefore 是两个常用的方法,用于在 DOM 中插入新的节点。但是,很多开发者对这两个方法的使用和区别不是很清楚...

    解决ie6 select的title不能显示的问题

    ### 解决IE6环境下`select`元素的`title`属性无法正常显示的问题 在Web开发过程中,经常会遇到一些浏览器兼容性问题,特别是在处理老旧版本的Internet Explorer(IE)时更为明显。本文将针对一个特定的问题——如何...

    谷歌浏览器 insertCell与appendChild的区别

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

    ACE 兼容ie8

    5. **DOM操作**:使用IE8兼容的方式处理DOM操作,例如避免使用`innerHTML`,而是采用`createElement`、`appendChild`等方法来创建和操作DOM元素。 6. **XDomainRequest**:对于跨域请求,IE8使用的是XDomainRequest...

    js兼容ie8的选项卡.rar

    IE8不支持W3C标准的`document.createElement()`, `appendChild()`, `removeChild()`等DOM操作。因此,为了兼容IE8,我们需要使用其特有的`document.all`对象和`innerHTML`属性来创建、修改和删除DOM元素。例如,...

    jsp\(二)未知的运行时错误(ie6的未指明的错误) .doc

    在使用JSP开发Web应用程序的过程中,可能会遇到一个特定的问题:即在Internet Explorer 6浏览器下出现“未指明的错误”,而在较新的版本如IE7和IE8中则显示为“未知的运行时错误”。这个问题主要发生在对某些HTML...

    jquery appen table 问题 ie8下解决方法

    本文将深入探讨“jquery append table问题在IE8下的解决方法”,结合给出的标签“源码”和“工具”,我们来详细讨论这个问题。 在jQuery中,`append()`函数是一个非常常用的方法,它允许我们在DOM(Document Object...

    IE创建动态表格注意事项

    在IE中,使用`document.createElement()`创建表格元素,`appendChild()`或`insertBefore()`添加到已有元素中,可能需要特别处理IE的特例。 4. **事件处理**: - IE对事件处理函数的支持与非IE浏览器不同。例如,IE...

    IE浏览器检测及禁用jQuery插件

    document.head.appendChild(script); } ``` 4. 兼容性检查:在插件内部,进行兼容性检查并在不支持的环境中禁用功能。例如: ```javascript (function($){ if ($.browser.msie && parseInt($.browser.version) )...

    兼容ie和火狐的js分页

    6. **sqxPager_Debug.js** 和 **sqxPager.js**:这两个文件是分页功能的JavaScript实现。Debug版本可能包含了额外的调试信息和未压缩的代码,便于开发和问题排查;而正常版本(sqxPager.js)应该是优化过的,适合...

    IE9浏览器下 使用JS获取图片尺寸大小 的方法

    这篇博客文章“IE9浏览器下 使用JS获取图片尺寸大小 的方法”主要探讨了如何在IE9环境下解决这个问题。以下是对这一主题的详细解释: 1. **图片预加载**: 在获取图片尺寸之前,首先要确保图片已经加载完成。预...

    IE功能汇总(javascript).htm

    7. **DOM操作**:在IE中,DOM操作可能会遇到一些问题,比如早期版本的IE对`appendChild()`、`removeChild()`等方法的实现与标准不符。理解并使用`attachEvent`而非`addEventListener`进行事件绑定也是IE特有的考虑。...

Global site tag (gtag.js) - Google Analytics