`

再谈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自适应高度

    NULL 博文链接:https://gadfly80.iteye.com/blog/1162303

    精谈iframe的作用和使用方式

    iframe是一个标记征。是一个很好的东西,大家下下来看下

    iframe框架用法收藏

    “画中画”效果--谈IFRAME标签的使用 纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么Banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚非,可毕竟让用户的...

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

    浅谈Iframe网页内部的导航窗口 以上这篇浅谈Iframe网页内部的导航窗口就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

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

    下面小编就为大家带来一篇浅谈layer的iframe弹窗给里面的标签赋值的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    浅谈JS之iframe中的窗口

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

    三谈Iframe自适应高度代码

    在构建B/S系统界面的时候,经常会遇到主页面index.html中嵌套其他页面的情况 ,虽然已经有的库已经提供了控件(例如jQuery easy UI),但是有时候iframe的使用是不可避免的

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

    feb-alive github地址 体验链接 Vue页面级缓存解决方案feb-alive (上) 在剖析feb-alive实现之前,希望大家对以下基本知识有一定的了解。 keep-alive实现原理 history api vue渲染原理 vue虚拟dom原理 ...

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

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

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

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

    再谈Yahoo关于性能优化的N条军规

    谨记:80%-90%的终端响应时间是花费在下载页面中的图片,样式表,脚本,flash等;详细的解释来这里查:也可以直接firebug上一项项比对,...留意具有这两个属性的标签如link,script,img,iframe等;Gzip压缩所有可能的

    浅谈vue 二级路由嵌套和二级路由高亮问题

    第一层路由我写在app....描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加来展现子页面信息,相当于嵌入iframe。 Home.v

    浅谈js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。 ...

    163K地方门户系统X5版本 同步手机版 贴吧上线 微信对接

    哪个不是满屏幕的广告,而且这种房地产商哪个不是资产过亿,每个月投入几千块去放网络广告简直就像吃顿午饭那样轻松,所以只要诚心的去和你网站相关,有共赢点的商家谈合作,相信拉广告绝对不成问题。 专业性的房产...

    浅谈javascript alert和confirm的美化

    –前言– window对象的alert和confirm标准方法在不同...win.alert等的对话框弹出层,使用iframe作底层,确保对话框在ie7以下版本时也能把select标签覆盖在底下,这些对话框在弹出之后,是不会阻塞脚本运行的,所以win

    浅谈HTML5新增和废弃的标签

    一、废弃的标签 ... 1、能用CSS代替的元素 这些元素包含basefont、big、center、font、s...HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的符合页面的形式,删除以上这三个标签。 3、只

    quem-sabe-eu-ainda-sou-um-sobrinho:MALANDRAGEM歌曲的模仿模仿,谈论侄子的所作所为

    MALANDRAGEM歌曲的模仿模仿,谈到了一个侄子的日常:)歌词全是男性的,但可以用女人味唱歌,特别是因为它不仅是那里的一个侄子,我们还有侄女也:P 播放并跟随以下字母 &lt;iframe宽度=“ 420”高度=“ 315” src =...

Global site tag (gtag.js) - Google Analytics