欢迎来到 jackNEss'窝窝
I like simple mind

iframe bug整理与解决方案总结

2011年09月18日

iframe bug 整理与解决方案总结

最近在做一个比较复杂的后台管理系统项目,结构类似于QQ邮箱,页面需要通过iframe调用内容页,和之前的项目不同,这个项目的iframe不是采用 onload的时候获取iframe的 src 页面的高度来让 iframe 高度只适应,而是根据后台的主页面(即iframe的父级页面)用户当前的浏览器高度来进行高度自动调整,毫无意外,可爱的 ie6酱 又给我各种的惊喜了。

在这里就顺便系统地整理下调用iframe在 ie6 下我所知道的各种惊喜与对应的解决方案。

惊喜一:iframe 宽度 100% bug

这个可以算是做需要流体布局中经常遇到的bug

如何触发?

当设置 iframe 的 width 为 100% 的时候 就会触发,十分有规律。页面打开第一次的时候好好的,但当你用的是ie6,再对当前页面进行刷新的时候,恭喜,惊喜来了。

以下是触发该bug的 html 源码:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ie6 iframe bug demo</title>
<style type="text/css">
<!--
*{margin:0; padding:0;}
.iframeoutset{ margin:50px; padding:10px; background:#e4f7ff; border:1px solid #e1e1e1; -moz-box-shadow:0 0 5px #ccc; -webkit-box-shadow:0 0 5px #ccc; box-shadow:0 0 5px #ccc;}
.iframeinset{ border:1px solid #e1e1e1; background:#fff;}
.iframe{ display:block;}
-->
</style>
</head>
<body>
<div class="iframeoutset">
	<div class="iframeinset">
		
		<iframe class="iframe" src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="cell.html" allowtransparency="true" frameborder="0" scrolling="auto" width="100%" height="200"></iframe>
			
		
	</div>
</div>	
</body>
</html>	
	

演示地址:http://www.jackness.org/lab/iframebug/iframe_bug01.html

解决方案!

根据这种灵异的现象,灵异得和 textrea 标签 width 100% 的那个ie6 bug 像twins般相似,于是试验性地采取 与 textrea 相同的解决方案,结果毫无悬念地成功地将这个bug修复。

以下提供2种解决方案:

  1. 将 iframe 的 width 的值设置为一个 非100%的一个值(99.5% 或者 定植 如 710px)即可。这种方法推荐对页面元素精度不高而且不允许改变html结构的时候使用
  2. 给 iframe 用一个 <blockquote>标签包着,并设置该标签 width=100%:

    <blockquote class="fix">
    	<iframe class="iframe" src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="cell.html" allowtransparency="true" frameborder="0" scrolling="auto" width="100%" height="200"></iframe>
    </blockquote>
    		
    /*css*/
    .fix{width:100%;}	
    		

    演示地址:http://www.jackness.org/lab/iframebug/iframe_debug01.html

惊喜二:iframe 横向滚动条 scrollbar bug

在我们让 iframe 拥有滚动条的时候,恭喜,惊喜来了,在ie6下,例如 你 iframe的当前宽度是 600px 的 而里面设置了 宽度自适应 即 width:auto,理论上里面的页面宽度就是600px,而在ie6下面 宽度却会是 600px + 15px(垂直滚动条的宽度) = 615px,结果,横向滚动条出现了…

如何触发?

当我们给iframe拥有 scrollbar的时候 就会触发。

演示地址:http://www.jackness.org/lab/iframebug/iframe_bug02.html

解决方案!

这个就是我当时做那个后台的时候遇到的问题,上网搜了下资料,微软提供的解决方案是这样的:

IE’S MOMENTARY LAPSE OF REASON:

The reason this occurs is because when you set the width of the iframe, the body of the included page inherits that width. So if the iframe has its width set to 400px, the body of the included page has its width set to 400px. This is not a problem unless the height of the page is greater than the height of the iframe. Then, the iframe takes up some of the width to use for the vertical scrollbar. So, the iframe has a width of 400px, but the width of the display box is only about 385px because the vertical scrollbar takes up about 15px. However, the body of the included page is still 400px – even if the included page’s content only has a width of 1px. So, you end up with a horizontal scrollbar. Other browsers set the width of the body to the width of the viewable space. IE is retarded.

THE WORKAROUNDS:

  1. Set the body style of the page that appears within the iframe to: display: inline; (<body style=”display: inline”> or use a style sheet or set the style in the header) The reason this works is because it forces the body with to be only as wide as its content.
  2. Set the doctype of the page that appears within the iframe to <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> (leave out the link to the dtd)
  3. in the iframe tag, set the attribute: scrolling=”yes” (This will cause the vertical scrollbar to always be present, but the horizontal scrollbar will appear only when necessary. The reason this works is because in this situation, IE allots space for the vertical scrollbar before setting the width of the included body.)

我在这里就稍微总结下可行的解决方案:

  1. 给 子级页面 的body 设置 css样式 display:inline(我试过,貌似无效…)
  2. 给页面dtd设置为 html4.0标准,即

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">			
    		

    可惜…我用的是html5的dtd,不太想换

  3. 给 iframe标签设置 scrolling=”yes”,不过这样会使滚动条总是出现。

    值得提醒的是,如果你给你当前项目的总样式表设置了:

    /*css*/
    html{overflow:auto;}
    		

    如果是这样的话,你的iframe的 scrolling = yes 是不生效的,这是由于 css样式的优先级 大于 html标签的属性所导致的。

惊喜三:iframe onload 高度自适应 获取子页面高度不对

当我们iframe调用不涉及到跨域问题,我们对iframe的操作可以采用让iframe自适应高度来让页面更加和谐些and美观。但是,当我们调用到一些比较旧的项目or一些非前端人员制作出来的页面的时候(如一个单一的内嵌flash的html页面,一般就直接由flash动画部门进行制作,不需经前端部门),会发现js捕获的子页面高度不正确,变成获取 当前iframe 的高度。

如何触发?

当子页面没有dtd声明,or dtd 失效的时候,这个bug就会触发,受影响浏览器:opera,ie6

演示地址:http://www.jackness.org/lab/iframebug/iframe_bug03.html

解决方案!

给回正确的dtd声明即可。

额外惊喜:chrome下 onload 获取子页面高度无效。

如上一种情况,在做iframe高度自适应的时候。当我们前端在出静态页面,并未放上服务器的时候,有时候,在测试了下 ie 个版本老大,然后测测firefox 还是ok,但是当测试chrome的时候..他居然给我们惊喜了

如何触发?

其实,这是由于 chrome 他又将安全机制升级所导致的,iframe即使在静态页面,也不允许对 iframe的子页面进行操作与获取信息。

解决方案!

只要,你的iframe高度自适应的 js 没写错。那丢到服务器吧,这样他就会和你变回想象中的他,问题解决的了,下面写一下make sure 没错的 高度自适应的 js函数

以下是其中一个make sure ok的 一种方法

<iframe  class="pro_submain" name="submain" src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="test/1.htm" scrolling="no" frameborder="0" allowtransparency="true" onload="this.style.height=this.contentWindow.document.body.scrollHeight+'px';"></iframe>	
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS