文档章节

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

thinkgood
 thinkgood
发布于 2013/10/14 17:17
字数 941
阅读 337
收藏 14

看转贴吧

但是需要说明的是,就是大家不要以为可以用这种方法来控制别人的网页,不行的

这个跨域虽说域名不一样,但必须都是你的,也就是你可以修改的才行,这个跨域这种方法可以实现,但是如果是别人的网页,你不能修改就不行了

在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此。

随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便。于是自动调整iframe的高度就成为本文的重点。

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域、跨域两种情况。

同域时Iframe高度自适应
下面的代码兼容IE/Firefox浏览器,控制id为“iframeid”的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。

代码如下,可复制。另外,请注意此解决方案仅供同域名下使用。


  
  
<script type="text/javascript">
 function SetCwinHeight(){
  var iframeid=document.getElementById("iframeid"); //iframe id
  if (document.getElementById){
   if (iframeid && !window.opera){
    if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
     iframeid.height = iframeid.contentDocument.body.offsetHeight;
    }else if(iframeid.Document && iframeid.Document.body.scrollHeight){
     iframeid.height = iframeid.Document.body.scrollHeight;
    }
   }
  }
 }
</script>
<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="kimi.php"></iframe>

跨域时Iframe高度自适应
在主页面和被嵌套的iframe为不同域名的时候,就稍微麻烦一些,需要避开JavaScript的跨域限制。

原理:现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个,通过main.html(域名为http://www.ccvita.com)嵌套iframe.html(域名为:http://www.phpq.net),当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度,agent.html(域名为:http://www.ccvita.com)取得传递的高度,通过JavaScript设置main.html中iframe的高度。最终实现预期的目标。

演示地址:http://www.ccvita.com/usr/uploads/demo/iframe/main.html
代码下载:http://www.ccvita.com/usr/uploads/demo/iframe/iframe.zip

iframe主页面main.html


  
  
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe主页面</title></head>
<body>
<div style="border:1px solid #ccc;padding:10px;"><iframe id="frame_content"  name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe></div><br />尾部<br /></body>
</html>

iframe嵌套页面iframe.html


  
  
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>被iframe嵌套页面</title></head>
<body>
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
    hashH = document.documentElement.scrollHeight;
    urlC = "agent.html";
    document.getElementById("iframeC").src=urlC+"#"+hashH;
}
window.onload=sethash;
</script>
</body>
</html>

iframe中介页面agent.html


  
  
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe中介页面</title></head>
<body>
<script>
function  pseth() {
    var iObj = parent.parent.document.getElementById('frame_content');
    iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;
    iObj.style.height = iObjH.split("#")[1]+"px";
}
pseth();
</script>
</body>
</html>



UPDATE:长期以来一直有网友说方案不能跨域,今天我重新又测试了下,确定在 IE6、IE7、IE8、IE9、Firefox全系列、Chrome全系列 均可以成功跨域控制高度。请注意以下要点
  • 第一,修改main.html文件中iframe的src地址为需要跨域的域名(比如ccvita.sinaapp.com)
  • 第二,修改iframe.html文件中的urlC值为源域名(比如www.ccvita.com)这点最重要

本文转载自:http://www.ccvita.com/376.html

thinkgood
粉丝 14
博文 100
码字总数 19330
作品 0
福州
高级程序员
私信 提问
iframe自适应高度的多种方法方法小结

第一种方法:代码简单,兼容性还可以,大家可以先测试下。 function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocume......

华山猛男
2014/03/27
149
0
关于JavaScript“跨域”问题的总结

什么是同源策略? 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以...

红薯
2010/04/20
2.9K
5
iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接...

银月光海
2016/05/23
97
0
跨域实现IFRAME自适应高度~续(终级)

IFRMAE请求一个跨域时,而这个跨我们没有操作权限,我们只有加一个HTML文件的权限,如何实现自适应行高 这需要一个中间页面iframe.html 原理:通过改变top.location的hash值,来实...

mcy247
2017/12/06
0
0
各浏览器Iframe对contentWindow、contentDocument、、的测试

Iframe易于嵌套及管理页面,但经常遇到跨域、父子页面访问问题,对于子页面访问父页面可以兼容性地通过window.Top或window.Parent或window.frameElement等操作,但对于标题中四个对象,一直没...

老鸟的空间
2014/07/09
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

webGL和three.js的关系

本文转载于:专业的前端网站➤webGL和three.js的关系 如今浏览器的功能越来越强大,而且这些功能可能通过JavaScript直接调用。你可以用HTML5标签轻松地添加音频和视频,而且可以在HTML5画布上...

前端老手
10分钟前
2
0
Spring如何实现AOP,请不要再说cglib了!

1. 从注解入手找到对应核心类 最近工作中我都是基于注解实现AOP功能,常用的开启AOP的注解是@EnableAspectJAutoProxy,我们就从它入手。 上面的动图的流程的步骤就是: @EnableAspectJAutoPr...

温安适
12分钟前
13
0
Mybatis之ParameterHandler

mybatis-3.4.6.release. ParementerHandler是个接口,如下List-1 List-1 public interface ParameterHandler { Object getParameterObject(); void setParameters(PreparedStateme......

克虏伯
26分钟前
3
0
Spark sql的批处理物理计划BatchScanExec

BatchScanExec是batch类的物理计划,对应的逻辑计划是DataSourceV2Relation,是Datasource。 它的入参是Scan类,Scan类有两个重要方法,一个获取分区列表信息;另一个方法获取读取器工厂。 ...

守望者之父
30分钟前
10
0
for循环与while循环

循环结构三要素 a. 初始值 b. 循环条件 c. 改变条件 for循环 声明格式 for(表达式1;表达式2;表达式3){ 循环体语句 } 表达式1:用来循环的变量初始值。(开始值) 表达式2:用来判断循环的条件。...

Lenat
36分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部