iframe高度自动适应

最新推荐文章于 2024-09-26 10:14:23 发布

原创最新推荐文章于 2024-09-26 10:14:23 发布 · 666 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #function #url #浏览器

IT说说专栏收录该内容

4 篇文章

订阅专栏

最近在用iframe嵌套页面，可是由于页面高度不一样，显示就不美观了！后来同事在网上找了很久，终于找到了解决办法，我在这里记录下，以便日后查看。

1.非跨域实现

有A.html和B.html两个页面，A.html中引入B.html：如：

注:有些浏览器不支持boby，所以就改成documentElement了

2.跨域实现

有A.html 、B.html、 C.html三个页面，A.htm和B.html不同域

如：http://www.baidu.com/A.html

http://www.google.com/B.html

实现A.html 嵌入B.html,在可以操作B.html的情况下，引入一个中介页面C.html

(1)A.html中引入:

<iframe width="0" height="0" frameborder="0" scrolling="no" src=" http://www.google.com/B.html"　id="frame_content"></iframe>

(2)B.html中引入：

<script type="text/javascript">

if(window.top!=window.self){ //判断当前窗口是不是顶层窗口，换句话说，判断当前窗口有没有被嵌套到其他窗口中，如果没，就是顶层窗口

document.write('<iframe src="" width="0" height="0" frameborder="0" scrolling="no" style="display:none" id="frameC"></iframe>');

window.onload=function(){

var hsahH=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)+10;

var urlC=http://www.baidu.com/C.html;

var url=urlC+"#"+hashH;

document.getElementById("frameC").src=url;

}

}

</script>

(3)C.html引入

<script type="text/javascript">

function fn(){

var iObj=document.getElementById("frame_content");

if(iObj){

var hObj=window.location.hash;

if(iObj && hObj.indexOf("#")!=-1){

var hei=hObj.split("#")[1];

if(hei!=""){

iObj.style.height=hei+"px";

}

}

}

}

fn();

</script>