iframe框架页中的高度自适应

【转载】框架页中的高度自适应：
 
　　在实际使用iframe的过程中，会遇到iframe高度的问题。由于被嵌套的页面大小不固定而出现滚动条。采用JavaScript来控制iframe元素的高度，让iframe高度自适应。另外，由于JavaScript对不同域名下权限的控制，会遇到同域、跨域的情况。
　　１、同域下的Iframe高度自适应
　　控制id为“iframeid”的iframe的高度，通过JavaScript取得被嵌套页面最终高度，然后在主页面进行设置来实现。
 1 <script type="text/javascript">
 2 function SetCwinHeight()
 3 {
 4     var iframeid=document.getElementById("iframeid"); //iframe id
 5     if (document.getElementById)
 6     {
 7         if (iframeid && !window.opera)
 8         {
 9             if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
10                 iframeid.height = iframeid.contentDocument.body.offsetHeight;
11             }
12             else if(iframeid.Document && iframeid.Document.body.scrollHeight)
13             {
14                 iframeid.height = iframeid.Document.body.scrollHeight;
15             }
16         }
17     }
18 }
19 </script>
 页面框架代码：
<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="demo.html"></iframe>
 
　　2、不同域下的Iframe高度自适应
　　主页面与被嵌套页面不同域时，涉及到权限问题，要规避JavaScript的跨域限制。
　　具体操作，可参考以下资料中的实验性实例代码，可行性有待考证。
 
参考：①.关于iframe页面高度自适应的问题(http://www.cnblogs.com/sirzxj/archive/2012/04/28/2475249.html)
　　　②.Iframe高度自适应(http://www.ccvita.com/376.html)
posted @ 2016-05-06 13:25  animagi  Views(5482)  Comments(0)  Edit  收藏  举报