iframe的几个常见问题-阿里云开发者社区

开发者社区> 技术小胖子> 正文

iframe的几个常见问题

简介:
+关注继续查看

 1.iframe的透明问题

除了IE家族,其他标准浏览器默认iframe是透明的。

对应IE7+ 的浏览器:

加个allowtransparency="true"如下

 


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <title>无标题</title> 
  5. </head> 
  6. <body style="background-color:#ccc;"> 
  7. <iframe allowtransparency="true" src="ifrm.html"></iframe> 
  8. </body> 
  9. </html> 

对应ie6还要设置iframe页面的body背景透明

 


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <title>内框架页</title> 
  5. </head> 
  6. <body style="background-color:transparent;"> 
  7. 这里是内框架页面。 
  8. </body> 
  9. </html> 

注:如果iframe页面不在同一域下,发现此方法失效。

2.去边框,滚动条等

 边框:

除了ie家族,可以使用css的border:none;实现。

ie得需设置iframe的frameborder="no"或者frameborder="0"实现,于是兼容的写法如下:

 


  1. <iframe allowtransparency="true" src="ifrm.html" style="border:none;" frameborder="no"></iframe> 

滚动条:

隐藏滚动条可以用scrolling="no"(此方式兼容所有的浏览器)


  1. <iframe allowtransparency="true" src="ifrm.html" scrolling="no" style="border:none;" frameborder="no"></iframe> 

 

对于ie8,ff3,chrome等,设置框架页的body的overflow:hidden;也可以隐藏滚动条(ie6,7,或者iframe页面对你不可控时不行)。

3.iframe自适应宽高度

 注:iframe的默认尺寸是300*150px

 方法是在iframe文档的onload加载句柄里做

 


  1. <iframe id="myifrm" onload="this.height=myifrm.document.body.scrollHeight;" allowtransparency="true" src="ifrm.html" scrolling="no" style="border:none;" frameborder="no"></iframe> 

 就把iframe里的页面的高度赋值给iframe框架窗口高度。

但这个火狐,认name窗口名,不信可以把id改成name试试,所以,兼容的写法是同时加上name,如:

 


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <title>无标题</title> 
  5. </head> 
  6. <body style="background-color:#ccc;"> 
  7. <iframe id="myifrm" name="myifrm" onload="this.height=myifrm.document.body.scrollHeight;" allowtransparency="true" src="ifrm.html" scrolling="no" style="border:none;" frameborder="no"></iframe> 
  8. </body> 
  9. </html> 

或者不写name也行(ie6,7未测试):

 


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <title>无标题</title> 
  5. </head> 
  6. <body style="background-color:#ccc;"> 
  7. <iframe id="myifrm" onload="this.height=document.getElementById('myifrm').contentDocument.body.scrollHeight;" allowtransparency="true" src="ifrm.html" scrolling="no" style="border:none;" frameborder="no"></iframe> 
  8. </body> 
  9. </html> 

 

这里再提供一个网上写好的一个函数:

 


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <title>无标题</title> 
  5. <script type="text/javascript" language="javascript">    
  6. function iFrameHeight() {    
  7.     var ifmdocument.getElementById("myifrm");    
  8.     var subWeb = document.frames ? document.frames["myifrm"].document : ifm.contentDocument;    
  9.     if(ifm != null && subWeb != null) { 
  10.        ifm.height = subWeb.body.scrollHeight; 
  11.     }    
  12. }    
  13. </script> 
  14. </head> 
  15. <body style="background-color:#ccc;"> 
  16. <iframe id="myifrm" onload="iFrameHeight();" allowtransparency="true" src="ifrm.html" scrolling="no" style="border:none;" frameborder="no"></iframe> 
  17. </body> 
  18. </html> 

 

注意:这里在chrome里,通过file://访问发现不行,但是http://可以,不知道何故。

 

在onload里处理有个问题,就是无法应对ifrm页面里内容变动引起高度变化,简单说,比如tab页签,2个tab页高度不一样,切换时就有问题了。

在口碑UED博客看到,通过定时执行一下的方法:

 


  1. window.setInterval("iFrameHeight()", 200); 

读者可以看下这篇文章,我没怎么看,抽空看下:-)

http://ued.koubei.com/?p=243

4.iframe页面与包含窗口的互通信

 

5.连带父子页面刷新问题

 


 本文转自 xcf007 51CTO博客,原文链接:http://blog.51cto.com/xcf007/376271,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Cloud for Customer的主页加载逻辑
Cloud for Customer的主页加载逻辑
3 0
我竟然不再抗拒 Java 的类加载机制了
我竟然不再抗拒 Java 的类加载机制了
2 0
Cloud for Customer里UI5 JavaScript代码和UI designer里模型的对应关系
Cloud for Customer里UI5 JavaScript代码和UI designer里模型的对应关系
3 0
教妹学 Java:动态伴侣 Groovy
教妹学 Java:动态伴侣 Groovy
4 0
SAP Cloud for Customer前端url里的一长串base64code是在哪里根据什么逻辑计算的
SAP Cloud for Customer前端url里的一长串base64code是在哪里根据什么逻辑计算的
3 0
Cloud for Customer UI designer自动生成的一些模型
Cloud for Customer UI designer自动生成的一些模型
3 0
一些Cloud for Customer的客户需求
一些Cloud for Customer的客户需求
4 0
Maven入门,读这篇文章就够了(1)
Maven入门,读这篇文章就够了
3 0
Cloud for Customer UI checkbox控件在PC和mobile端的不同显示
Cloud for Customer UI checkbox控件在PC和mobile端的不同显示
4 0
五分钟搞定 HTTPS 配置,二哥手把手教
五分钟搞定 HTTPS 配置,二哥手把手教
3 0
13262
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载