夏日博客

A-A+

iframe同域跨域高度自适应的实现

2016年10月14日 前端设计 暂无评论 阅读 6 views 次

本文章收集大量的关于iframe同域跨域高度自适应的实现程序代码，下面我来给大家介绍介绍,本效果的实现需要父页面和子页面都需要作相应的设置,以下是具体的设置及代码:

一、父层页面的设置

1、是父层的iframe引入,代码如下:

  1. <iframe frameborder="0" scrolling="no" width="100%" src="iframe.html" id="paopaowang"></iframe>  

2、父层要设计一个域名的变量 domain,代码如下:

  1. <script type="text/javascript">  
  2.    document.domain = "aqy106.com";  
  3. </script>  

二、包含的iframe的设置

在这个页面里，你需要给你的body或用一个容器将iframe中的所有元素包裹，然后添加一个个id

1.id="bodybox"

然后再添加以下的脚本代码，其中要注意的是 document.domain = “aqy106.com”; 这里的域名要设置成和父层一样的域名,代码如下:

  1. <script type="text/javascript">  
  2.     document.domain = "aqy106.com";  
  3.     function reSetHeight(h, scl) {  
  4.         if (!top.document.getElementById("paopaowang")) return;  
  5.         with (top.document.getElementById("paopaowang")) {  
  6.             if (offsetHeight != h) {  
  7.                 style.height = h + 'px';  
  8.             }  
  9.         }  
  10.         top.document.body.style.height = top.document.body.scrollHeight;  
  11.         if (!scl) {  
  12.             if (top.document.documentElement.scrollTop) top.document.documentElement.scrollTop = 0;  
  13.             if (top.document.body.scrollTop) top.document.body.scrollTop = 0;  
  14.         }  
  15.         h=document.getElementById("bodybox").offsetHeight;  
  16.         with (top.document.getElementById("paopaowang")) {  
  17.             if (offsetHeight != h) {  
  18.                 style.height = h + 'px';  
  19.             }  
  20.         }  
  21.     }  
  22.     window.onload=function(){  
  23.         reSetHeight(document.getElementById("bodybox").offsetHeight);  
  24.     }//xiariboke.net  
  25. </script>  

至此已全部完成，具体代码已很简单明了，可以自行修改和分析，各位具体可以尝试将代码放到同域或不同域中尝试。

但该脚本也有不完美的地方，就是如果iframe页面中有脚本进行操作，改变了iframe页面的高度，父层的页面的iframe的高度无法自动适应，也就只能实现浏览器初次载入能成功获取iframe的高度和加载高度，但在firame中的操作时父层无法实时的适应高度，所以还是有改进的地方的，以后将继续完善。

其它站长提供的方法

关键代码：iframe主页面：main.html,代码如下:

  1. <iframe id="iframeB"  name="iframeB" src="www.b.com/B.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>  

iframe嵌套页面：B.html,代码如下:

  1. <iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>  
  2. <script type="text/javascript">  
  3. function sethash(){  
  4. hashH = document.documentElement.scrollHeight; //获取自身高度  
  5. urlC = "www.a.com/A.html"; //设置iframeA的src  
  6. document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递  
  7. }  
  8. window.onload=sethash;  
  9. </script>  

中介页面：A.html,代码如下:

  1. <script>  
  2. function pseth() {  
  3. var iObj = parent.parent.document.getElementById('iframeB');//A和main同域，所以可以访问节点  
  4. iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//访问自己的location对象获取hash值  
  5. iObj.style.height = iObjH.split("#")[1]+"px";//操作dom  
  6. }  
  7. pseth();  
  8. </script>  

跨域方法

实现原理：比如现在有两个网站域名分别为A.com; B.com; A网站有个Iframe，需要把B网站放到该Iframe中，但是Iframe的高度 得先获取B网站的页面高度，然后根据所获取的高度来修改A网站Iframe的高度值。 1： 是要在B网站（即下属网站）获取自己的页面的高度， 2：B网站没权限修改A网站的高度，需要一个中间页面，该中间页面可以修改A网站的高度，so.这个中间页面必须与A网站在同一个域下。

A网站的关键代码：

  1. <iframe id="iframepage" name="iframepage"  frameborder="0" scrolling="no" width="100%" src="@ViewData["urlstr"]">  
  2. </iframe>    //src是B网站的页面地址  

B网站的关键代码：

在B网站下也加一个iframe,该iframe是为了导向A网站的中间页面，从而改掉A网站的Iframe高度,代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   
  5. <script type="text/javascript">  
  6.   
  7. 　　$(function () {  
  8.   
  9. 　　　　hashH = document.documentElement.scrollHeight;  
  10.             urlC = "http://www.:9001/Home/Agent";                           //为A域名的中间页面，此处一定要用域名，不能用Ip  
  11.             document.getElementById("MiddleIframe").src=urlC+"#"+hashH;  
  12.         });  
  13.   
  14. </script>  
  15.   
  16. </head>  
  17. <body>  
  18.     <div class="topTitle">  
  19.         .....  
  20.     </div>  
  21.     @RenderBody()  
  22.     <iframe id="MiddleIframe" name="MiddleIframe" src="http://www.:9001/Home/Agent" width="0" height="0" style="display: none;">  
  23.     </iframe>  
  24. </body>  
  25. </html>  

中间页面的关键代码：

该页面是在A域名下的一个文件，由上面的src知道我就是在A网站的HomeController下开了个Agent的方法,代码如下:

  1. <script type="text/javascript">    
  2.     $(function () {  
  3.         var iObj = parent.parent.document.getElementById('iframepage');　　　　　　//找到该域下的iframe然后修改其值  
  4.         iObjH = parent.parent.frames["iframepage"].frames["MiddleIframe"].location.hash;  
  5.         iObj.style.height = iObjH.split("#")[1] + "px";  
  6.     });     
  7. </script>  
标签：

给我留言