在我们平时做项目的时候难免会遇到要使用iframe嵌套解决问题，但是有的时候宽度和高度自适应如果按F11全屏就不能很好的解决自适应的问题，今天就来说下如何解决按F11一样自适应的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下测试通过
官方QQ群号码：922069959
点击链接加入群聊【路由器交流】：https://jq.qq.com/?_wv=1027&k=5AKdmZP
您可能感兴趣的文章
- 自适应网页content="pc,mobile"和content="width=device-width有什么区别？
- 阻止iframe里的网页自动跳转如何阻止iframe里引用的网页自动跳转方法
- 终极解决禁止网站被别人通过iframe引用嵌套套入。防止别人镜像自己的网站
- 本文固定链接:https://aisoa.cn/post-2160.html
- 转载请注明:于爱搜啊博客发表
赏 
支付宝打赏
微信打赏
支付宝打赏微信打赏
《本文》有 0 条评论