iframe完美嵌入网页解决网页全屏IFrame自适应iframe内嵌网页高度自适应

2018-09-19
0评论
/
3568阅读
爱搜啊

在我们平时做项目的时候难免会遇到要使用iframe嵌套解决问题,但是有的时候宽度和高度自适应如果按F11全屏就不能很好的解决自适应的问题,今天就来说下如何解决按F11一样自适应的iframe嵌套框架。

iframe是一个可以把另外一个网页嵌入到一个网页里的代码,非常有用。对于一个内容不错的网页,要方便地把它搬到自己的博客里,用这个代码最合适。而对于在新浪博 客里不支持的一些网页效果和代码,可先把他们设置好,在支持他们的网站上使用,或上传到一个免费的网络空间或网络硬盘里,获取相应的网页地址,然后用 iframe嵌入到新浪博客里,非常好用!iframe完美嵌入网页解决网页全屏IFrame自适应iframe内嵌网页高度自适应

下面这段代码就可以很好的解决F11全屏一样可以自适应。

<html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>iframe全屏测试</title>  
<mce:style><!--  
body { margin: 0px;  }  
iframe {border: 0px;}  
--></mce:style><style mce_bogus="1">body { margin: 0px;  }  
iframe {border: 0px;}</style>  
</head>  
<mce:script type="text/javascript"><!--  
        function resize(){  
            document.getElementById('frame3d').style.height = document.body.clientHeight - 84+"px";  
        }  
        window.onresize = resize;  
          
// --></mce:script>  
<body scroll="no">  
<img border="0" width="100%" height="84" src="./images/logo.png" mce_src="images/logo.png">  
<iframe id="frame3d" name="frame3d" frameborder="0" width="100%" scrolling="auto"  
    style="margin-top: -4px;" onload="this.style.height=document.body.clientHeight-84"  
    height="100%" src="./map.jsp" mce_src="map.jsp"></iframe>   
</body>  
</html>

在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点。想比之下,iframe就简单多了!处理iframe的自适应宽、高,会经常用到,网上整理了一份,写在这里备用:

单个iframe 高度自适应:

<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.html"></iframe>

起作用的是这句:

onload="this.height=iFrame1.document.body.scrollHeight"

多层嵌套iframe 高度自适应:
A页面的iframe:

<iframe id="frame_content" src=”B.php“ name="right" width="1003" frameborder="0" scrolling="no" ></iframe>

B.php页面又有一个iframe:

<iframe width="750" name="rightform" id="rightform" src="KinTimMng_right_init.php" frameborder="0" scrolling="no" onload="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';" ></iframe>

起作用的代码是这句:

onload="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';"

onload的时候执行了两条js语句:

1、设置当前iframe自己的高度自适应

this.height=rightform.document.body.scrollHeight

2、设置父iframe的高度自适应(注意后面的高度单位px,如果不加单位,firefox下不起作用)

parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px'

以上代码在ie6、ie7、ie8、firefox3.5下测试通过


本站附件分享,如果附件失效,可以去找找看

诚通网盘附件百度网盘附件


于2018-09-19发布
相关文章