iframe自适应高度方法

 谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了。而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了。

如果iframe的高度没有确定,那将是初始的高度。
iframe是网页中的一部分,其大小还要受到网页的限制,设置最高可以使用height="100%"。
基本上解决iframe超出的高度都是增加了滚动条来实现的,很简单,如果你iframe中的信息超出了一屏幕,你就必须使用滚动条了。

开始用的时候还不行,后来发现是因为js跨域问题,没有权限。后来设置了window.document.domain 就可以了,用的是jquery代码2方法。

跨域下的iframe自适应高度

跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。

a.html中包含iframe:
<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>

在c.html中加入如下代码:
<iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" style="display:none" ></iframe>
<script type="text/javascript">
    (function autoHeight(){
        var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
        var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
        var c_iframe = document.getElementById("c_iframe");
        c_iframe.src = c_iframe.src+"#"+b_width+"|"+b_height; 
    })();
</script>

最后,agent.html中放入一段js:
<script type="text/javascript">
    var b_iframe = window.parent.parent.document.getElementById("Iframe");
    var hash_url = window.location.hash;
    if(hash_url.indexOf("#")>=0){
        var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
        var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
        b_iframe.style.width = hash_width;
        b_iframe.style.height = hash_height;
    }
</script>
agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)

超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。
下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。
注意别放错地方了哦。

下面是其他两种方法:
iframe代码,注意要写ID

<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

jquery代码1:

//注意:下面的代码是放在test.html调用
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});

jquery代码2:

//注意:下面的代码是放在和iframe同一个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
}); 

第二种有效,不过要注意一点是,增加的JS要写在iframe下面,放在头部是测试没有效果。
测试代码:
<iframe id="mainframe" name="mainframe" marginwidth="0" marginheight="0" src="/Home/Activitylist" frameborder="0" width="100%" scrolling="no" height="100%"></iframe>
<script type="text/javascript">
//注意:下面的代码是放在和iframe同一个页面调用,放在iframe下面
$("#mainframe").load(function () {
var mainheight = $(this).contents().find("body").height() + 30;
 $(this).height(mainheight);
});
</script>

 
 

时间: 2024-08-07 22:44:44

iframe自适应高度方法的相关文章

iframe 自适应高度方法

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以"伸缩自如",所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. 复制代码代码如下: function SetWinHeight(obj)  {  var win=obj;  if (docum

经典的iframe自适应高度方法总结

iframe高度自适应 iframe高度自适应是一个很老的话题.html5虽然已经将frame 框架给废弃,但是iframe这个标签还是存在的.假如有同学不了解frame和iframe的区别,可以看我之前的文章:html框架之iframe和frame及frameset的相关属性介绍. 虽然现在iframe在项目中已经很少出现了,但是有些项目迫不得已,还是会用到iframe.近期遇到一个案例,就用到了iframe. 基本案例如下: 由于手机浏览器预览PDF不是很好,因此,将手机上预览PDF改成预览

jquery ajax应用中iframe自适应高度问题解决方法_javascript技巧

iframe自适应高度本身是很简单的方法,就是在页面加载完成后,重新计算一下高度即可. 代码如下: 复制代码 代码如下: //公共方法:设置iframe的高度以保证全部显示数据//function SetPageHeight() {//    var iframe = getUrlParam('ifname');//    var myiframe = window.parent.document.getElementById(iframe);//     iframeLoaded(myifra

JS实现iframe自适应高度的方法(兼容IE与FireFox)_javascript技巧

本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: 之前一直被iframe自适应高度的问题困扰,很多JS代码在FF里面似乎就变成哑巴了.后来下面这段代码终于被我从万千号称兼容FF的代码堆中翻了出来.我已经用过了,真的好用.尤其是对于我这样的JS水平较低(真不好意思)的人来说,这段代码简单易懂,方便修改,只要把下面的代码复制粘贴到iframe所在页面的<body>标签里面,并且修改一下ID名就行了(注意,要修改的地方有两个,位置在代码中有说明). 向原创这段代码

iframe自适应高度的简单方法及实例

iframe 自适应高度,目前最广泛的实现方式是以 JS 获取 iframe 所载入页面的 body 高度.(在本地 html 文件测试的时候 chrome 会有跨域错误,可以使用 IE 来测试).其实质就是通过 offsetHeight 或者 scrollHeight 获取到 iframe 内部 body 的高度,再调整 iframe 高度即可.以下是初略形式: Test.html 源码  代码如下 复制代码 <!DOCTYPE HTML> <html>   <head&g

关于IFRAME 自适应高度的研究

自适应 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content=&qu

iframe自适应高度解决方案详细教程

通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条. 我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的.而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何做动态同步的问题.另外,在兼容性方面,也研究的不彻底. 这篇文章,希望在这两个方面再做一些深入. 可能有人还没接触到这个问题过,先说明一下,什么是自适应高度吧.所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的 bor

网页设计技巧:iframe自适应高度

可能有人还没接触到这个问题过,先说明一下,什么是自适应高度吧.所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe.如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了.而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了. 顺便说下,iframe在迫不得已的时候才去用,它会给前端开发带来太多的麻烦. 传

兼容主流浏览器的iframe自适应高度js脚本

 兼容主流浏览器的 iframe 自适应高度,很实用的,具体的js脚本如下,感兴趣的朋友可不要错过  兼容主流浏览器的 Iframe 自适应高度,js脚本如下:   代码如下: //iframe 高度自适应  function iframeAutoFit(iframeObj) {  setTimeout(function () {  if (!iframeObj) return;  iframeObj.height = (iframeObj.Document ? iframeObj.Docume