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

2018-09-19

0评论

阅读

管理员

在我们平时做项目的时候难免会遇到要使用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下测试通过

本站附件分享，如附件失效，可以去找找看
诚通网盘附件、百度网盘附件
PS：由于百度网盘附件太大，所以百度网盘附件为拆分压缩，全部下载后打开zip后缀文件即可。也可以只下载zip后缀文件查看（只可以查看不能解压）是否有需要的文件，再下载全部文件解压需要的文件

干饭福利分享： 微信扫码领取“饿了么”抵用券↓↓↓↓↓↓↓↓↓↓

标签: iframe 自适应全屏iframe

于2018-09-19发布

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

相关文章