在我们平时做项目的时候难免会遇到要使用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下测试通过
如无特殊说明，解压密码均为：aisoa.cn
您可能感兴趣的文章
- 自适应网页content="pc,mobile"和content="width=device-width有什么区别？
- 阻止iframe里的网页自动跳转如何阻止iframe里引用的网页自动跳转方法
- 终极解决禁止网站被别人通过iframe引用嵌套套入。防止别人镜像自己的网站
- 本文固定链接:https://aisoa.cn/post-2160.html
- 转载请注明:于爱搜路由发表
赏
支付宝打赏
微信打赏
支付宝打赏
微信打赏