`

动态创建iframe—IE与其他浏览器的不同

    博客分类:
  • html
阅读更多
很多情况下,我们都要动态创建元素,比如动态创建iframe,iframe很特殊,它即可以看作是页面元素,也可以看作是窗体对象。所以,所对应的取法也不同。比如当作是页面元素的时候,这样取:document.getElementById('iframe_id'),当作是窗体对象的时候取法就多了,主要有三种:1、window.frames[index]    2、window.frames['iframe_id']    3、window.frames.iframe_id 

这三种取法在IE里都一样,都能正确得到iframe对象,Opera也能正常取出,但惟独FireFox却不好使,不管你用哪种取法总是取不出!开始自己也一直想不通错在了那里,想可能是FireFox浏览器本身的一个Bug,但通过这次项目终于真相大白!

    项目要实现这样一个功能,动态创建一个form表单来跨域提交数据,并将form表单的target设置成动态创建的iframe(页面不会跳转到提交的页面)。即:MyForm.target="iframe_name"。那么在创建iframe的时候就要给它赋name属性。问题就出现了,代码如下

<script language="javascript" defer="defer">
      var IframeObj = document.createElement("iframe");
       IframeObj.id= "myfrm";
       IframeObj.width =0;
      IframeObj.height =0;
       IframeObj.frameborder = 0;
      IframeObj.src="about:blank";
       IframeObj.name = "myfrm";
       document.body.appendChild(IframeObj);
</script>

这段代码在FireFox和Opera下都很正常,但在IE下却赋不了name属性!!!

于是我想可能是因为这样写是把它当作了一个页面元素,所以赋不了,那么就它作为一个window对象,然后再赋name属性。代码如下:

<script language="javascript" defer="defer">
      var IframeObj = document.createElement("iframe");
       IframeObj.id= "myfrm";
       IframeObj.width =0;
      IframeObj.height =0;
       IframeObj.frameborder = 0;
      IframeObj.src="about:blank";     
       document.body.appendChild(IframeObj);

       window.frames.myfrm.name = "myfrm";
</script>

     这样写IE是正常了,可FireFox确又不干了!!!错误提示是window.frames.myfrm没有这个属性???无奈之下只好这么写:

<script language="javascript" defer="defer">
      var IframeObj = document.createElement("iframe");
       IframeObj.id= "myfrm";
       IframeObj.width =0;
      IframeObj.height =0;
       IframeObj.frameborder = 0;
      IframeObj.src="about:blank";

       frameObj.name = "myfrm";
       document.body.appendChild(IframeObj);

       window.frames.myfrm.name = "myfrm";
</script>

这样写就一切正常了,于是我得出了这个结论:在FireFox下,取窗体对象是window.frames.frame_name,而不是windwo.frames.frame_id,在没写frameObj.name = "myfrm";这句代码的时候报没有window.frames.myfrm没有这个属性错误就是这个原因。既然window.frames.frame_name可以,那么window.frames[frame_name]和window.frames[index]当然也是可以的!

分享到:
评论

相关推荐

    iframe高度自适应,多浏览器兼容

    不同的浏览器对`iframe`的支持程度和行为可能有所不同,尤其是在老版本的IE浏览器中。以下是一些兼容性的处理策略: 1. **IE6/7**:这两个版本的IE不支持`contentWindow`和`contentDocument`,因此需要使用`...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    为了解决这个问题,我们需要一种方法来动态地调整`iframe`的高度,使其与内容匹配。这种技术通常涉及到JavaScript,通过监听`iframe`的`load`事件,然后获取`iframe`内的文档高度,并设置到`iframe`的`height`属性上...

    JS动态添加iframe的代码

    这里使用了一个假设的ie变量和version变量来判断浏览器的类型和版本,然后根据不同的情况选择创建iframe的方式。在旧版IE浏览器中使用字符串创建方法,在其他浏览器中则使用setAttribute()方法来设置iframe的src属性...

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

    // 创建iframe元素 var iframe = document.createElement("iframe"); // 设置iframe样式,隐藏边框、填充等 iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.margin = '0'; ...

    javascript中兼容主流浏览器的动态生成iframe方法

    可以得出在开发中动态生成兼容主流浏览器的iframe的几个关键步骤:首先是创建iframe元素,接着是设置相关的属性来满足业务需求,然后针对不同浏览器使用不同的兼容性代码,最后实现对iframe加载内容的监控与处理。...

    jquery通用的iframe弹层插件,兼容主流浏览器

    在实现浏览器兼容性时,开发者可能面临各种挑战,例如不同浏览器对CSS属性、JavaScript API的支持程度不一,或者IE浏览器特有的兼容性问题。他们可能会使用polyfill(兼容性补丁)来提供旧浏览器不支持的新特性,...

    MFC ie webbrowser iframe/frame

    这通常通过资源编辑器完成,或者在代码中动态创建。控件会提供一个IDispatch接口,通过这个接口你可以调用控件的各种方法和属性。 2. **导航到URL**:使用`Navigate`函数可以加载指定的URL到WebBrowser控件中,例如...

    弹出窗口__iframe

    总之,理解和掌握弹出窗口与iframe的使用,以及它们在不同浏览器中的表现和适配策略,是前端开发者必备的技能之一。在实际开发过程中,需要根据目标用户的浏览器环境,灵活运用各种技术和技巧,以确保最佳的用户体验...

    [导入]Javascript获取IFrame内容(兼容IE&FF)

    本文将详细介绍如何在各种浏览器,包括Internet Explorer(IE)和Firefox(FF)等主流浏览器中,正确地获取Iframe中的内容。 首先,理解Iframe的基本概念。Iframe是一种HTML元素,允许我们在一个网页中嵌入另一个...

    java跨全域兼容ie/ff/chrome浏览器多文件上传(原创)

    本示例通过"java跨全域兼容ie/ff/chrome浏览器多文件上传(原创)"的标题,我们可以看出这是一个解决浏览器兼容性问题并实现跨域文件上传的解决方案。下面将详细解释这个主题涉及的关键知识点。 1. **跨域资源共享 ...

    Iframe高度自适应(兼容IE/Firefox、同域/跨域)

    "Iframe高度自适应(兼容IE/Firefox、同域/跨域)"这一主题是关于如何让内嵌在Iframe中的页面能够根据其内容动态调整自身的高度,确保在不同浏览器(如IE和Firefox)以及处理同域和跨域情况时都能正常显示。...

    支持ie9的js

    上述示例展示了如何通过JavaScript动态创建`&lt;iframe&gt;`元素以适应不同的浏览器环境。这种做法有助于提高网页应用的兼容性和用户体验。当然,在实际开发过程中还需要考虑更多的细节问题,例如对特定API的支持情况等。...

    JS加载iFrame出现空白问题的解决办法

    问题的出现可能与IE6浏览器的特性有关,比如对于DOM处理的特殊性,以及其他兼容性问题。 接着,文章提供了解决方案之一:通过使用`setTimeout`方法来延迟执行iframe的加载。具体的实现方式是将iframe的`src`属性...

    【JavaScript源代码】JavaScript 判断浏览器是否是IE.docx

    在实际开发中,由于各个浏览器对JS特性的支持程度不同,尤其是Internet Explorer(简称IE)与其他主流浏览器(如Chrome、Firefox)之间存在显著差异,因此前端开发者经常需要编写特定的代码来检测用户是否使用了IE...

    IE下去掉iframe边框兼容IE7\IE8\IE6以下

    接着,可以将这些新创建的iframe元素添加到页面的body或者其他容器元素中。在这个过程中,也可以使用style.cssText属性来直接设置元素的样式,例如将iframe的border设置为"none",以确保样式能够被正确应用。 总结...

    js实现iframe自适应高度

    在网页开发中,`iframe`(Inline Frame)是一种嵌入其他网页的标签,常用于页面模块化、加载外部内容或创建多窗口体验。然而,`iframe` 的一个常见问题是其内容区域的高度可能超过其本身的显示区域,导致滚动条出现...

    js调用iframe实现打印页面内容的方法

    7. 打印完成后,如果用户使用的浏览器是IE,需要将iframe从body中移除以避免影响其他内容。 ### 知识点二:使用jQuery简化打印实现 jQuery是一个强大的JavaScript库,它提供了一个简洁的API来简化DOM操作、事件...

Global site tag (gtag.js) - Google Analytics