`

再谈Iframe的问题

阅读更多
     http://js8.in/638.html
iframe是可以做的事情非常多,比如通过iframe实现跨域,使用iframe解决IE6下select遮挡不住的问题,通过iframe解决Ajax的前进后退问题,再比如通过iframe实现异步上传。在很早我就写过一篇文章说明了Iframe在IE、firefox下的一些DOM操作。今天结合最近项目中遇见的iframe问题,再来谈谈iframe的一些常见问题解决方案。
IE下iframe背景透明问题

在firefox下,iframe背景默认的是透明的,在IE下默认不是透明的,我们可以使用allowTransparency='true' 来设置IE下的iframe为透明,另外我们使用scrolling ='no' frameborder='0'分别来实现iframe页面没有滚动条,边框宽度。
IE6下iframe不显示的问题

不得不说IE6是个操蛋的浏览器,尤其是在中国!iframe有的时候在IE6中会出现不显示的问题,主要有以下几种原因,请一一排查:

    可能你的iframe没有设置宽高,例如在table不居中,计算不出来td的高度,会导致这种问题
    尝试使用下面的代码来重新载入IE6下的iframe页面:

        setTimeout(function(){
        document.frames['fuckIE6'].location.reload();
        },0)

    传闻iframe标签中不要把src紧跟在iframe之后,也就是<iframe src='js8.in' name='fuckIE6'></iframe>是错误的,不过我没有碰见过类似的问题,为了保险起见,还是不要写成上面的样式为妙。

iframe跨域问题

如果遇见了iframe跨子域的问题,可以尝试在父窗口和子窗口添加document.domain="js8.in"来解决。
iframe DOM操作问题

iframe的DOM操作,我在《使用JavaScript在IE和Firefox下进行iframe的DOM操作》中已经讲解的比较详细,并且有详细的演示 ,在子窗口B操作子窗口A的时候,我使用的是通过子窗口B操作父窗口来间接操作子窗口A,也就是说通过parent来选择子窗口A然后再对其进行操作。不要使用子窗口B来创建一个DOM对象然后插入到父窗口。因为这样的操作会在IE下出错!例如下面的例子:
子窗口中的js代码:

var div = document.createElement('div');
div.id="fuckIE6";
div.innerHTML="fuckIE6";
parent.document.getElementsByTagName('body')[0].appendChild(div);

上面的代码会在IE出现问题,所以正确的方法是:

var div = parent.document.createElement('div');
div.id="fuckIE6";
div.innerHTML="fuckIE6";
parent.document.getElementsByTagName('body')[0].appendChild(div);

也就是通过父窗口创建DIV标签,然后在插入到body之后。
分享到:
评论

相关推荐

    再谈iframe自适应高度

    "再谈iframe自适应高度"这个主题,关注的是如何使iframe的内容区域根据所加载页面的高度自动调整,以避免滚动条出现或者内容被截断的问题。在网页设计中,尤其是在构建响应式布局时,这是一个非常关键的优化点。 1....

    精谈iframe的作用和使用方式

    3. **多层嵌套**:`iframe`支持多层嵌套,这意味着一个`iframe`内可以再嵌入另一个`iframe`,实现更复杂的页面布局和功能。 4. **兼容性问题**:需要注意的是,不同浏览器对`iframe`的支持程度和表现可能有差异。...

    浅谈Iframe网页内部的导航窗口

    - 安全问题:即便Iframe可以加载不同源的内容,但应避免在没有严格验证的情况下加载不可信的外部内容,以免发生XSS(跨站脚本攻击)等安全问题。 4. 实际应用案例 - 在线广告:某些网站将第三方广告内容嵌入...

    浅谈layer的iframe弹窗给里面的标签赋值的问题

    总结来说,面对layer的iframe弹窗中的数据赋值问题,我们可以借助jQuery选择器和DOM操作,结合layer提供的API,有效地将主页面的数据传递给弹窗页面,并为其中的标签赋值。这种方法既简单又实用,是解决此类问题的一...

    三谈Iframe自适应高度代码

    跨域问题是指当iframe加载的页面与主页面不在同一个域时,出于安全考虑,浏览器会限制JavaScript对iframe内容的访问,这会使得自适应高度变得更加复杂。 总的来说,虽然iframe在使用上存在一定的限制和挑战,但通过...

    浅谈JS之iframe中的窗口

    1.window.self  对当前窗口自身的引用;self,window.self,window三者是等价的 ...以上这篇浅谈JS之iframe中的窗口就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

    浅谈文章被百度秒收问题

    尽量避免多篇文章中出现相同内容,可以使用iframe框架嵌套共享信息,以保持每篇文章的独特性和原创性。或者,直接删除重复部分,确保每篇文章都有其独特价值。 最后,文章的发布时间也会影响收录效率。建议在百度...

    浅谈H5前端性能测试实践1

    合理管理DOM节点,避免大量占用内存的复杂动画和iframe,适时释放不再使用的资源。 综上,H5前端性能测试涉及网络、解析、资源加载等多个层面。通过理解加载过程、分析性能瓶颈并采取相应优化措施,可以显著提升H5...

    浅谈Vue页面级缓存解决方案feb-alive (下)

    为了解决这个问题,出现了第三方库 `feb-alive`,它提供了页面级别的缓存解决方案。 `keep-alive` 实现原理: `keep-alive` 是 Vue 中的一个抽象组件,用于包裹动态组件,使得被包裹的组件在切换时不会被销毁,而是...

    Html基础知识串讲最新版本

    《Html基础知识串讲》一书由寒点建站网搜集编制,内容部分来源于网络,由寒点技术小组经过精心修改、补充和完善,在内容上使得更为充实,在层次上渐渐深入,对读者进行循循善诱,起到良好...第13讲:谈Iframe标记的使用

    浅谈js中子页面父页面方法 变量相互调用

    在JavaScript开发中,特别是在涉及到iframe嵌套页面的情况下,经常需要在子页面和父页面之间进行方法和变量的相互调用。在Web开发的场景中,子页面指的是嵌入到父页面中的iframe页面。由于它们处于不同的浏览上下文...

    浅谈Vue页面级缓存解决方案feb-alive(上)

    feb-alive github地址 体验链接 使用理由 开发者无需因为动态路由或者普通路由的差异而将数据初始化逻辑写在不同的钩子里beforeRouteUpdate或者activated 开发者无需手动缓存页面状态,例如通过localStorage或者...

    《Html基础知识串讲》.chm格式

    ... ...书中先后对字体、图像、表格、框架、序列卷标、表单、排版卷标、背景标志、链接标志和框架等10个方面的问题进行探讨,希望对Html初学者有所帮助。 目录 ...第5讲:控制表格及其表项...第13讲:谈Iframe标记的使用

    AMP改造教程,浅谈AMP接入解决方案.docx

    它管理资源的异步加载,确保内容可以迅速呈现,同时禁止性能不佳的CSS选择器,以及将所有iframe沙盒化。AMP JS还提供预计算布局,以提高页面加载速度。 3. **AMP Cache**: 这是由Google提供的一个内容分发网络(CDN...

    浅谈Ajax跨域Session和跨域访问

    5. 使用IFrame:通过IFrame加载跨域页面,并通过Window.postMessage进行跨域通信,但这通常仅限于同源策略放宽的情况,或者两个页面都可控的情况下。 总之,解决Ajax跨域问题需要理解同源策略的限制,并结合JSONP、...

Global site tag (gtag.js) - Google Analytics