• 跨域从子页面设置父页面iframe高度(前提,两个域名下都有操作权限)


    注:下面的方案可以使用,也可以用另外的一种方案来解决,就是postmessage,具体可以查相关资料了解

    之前在论坛里看到有个同学问关于跨域调整iframe高度的问题,正好之前解决过类似问题,鉴于此问题还是有一定的通用性,索性总结一下,记录于此。


    具体思路如下:



    父页面域名为 : www.a.com

    IFRAME里子页面域名为 : www.b.com


    1.在父级页面所在域名(www.a.com)下设置一个文件,(用来设置IFRAME的高度)比如:http://www.a.com/setHeight.html

    2.在子级页面加载完毕后,计算当前页面高度付给一个变量cheight,然后动态创建一个iframe,src是http://www.a.com/setHeight.html#cheight;

    3.通过在setHeight.html页面中parent.parent.document.getElementById('iframeid')来调整iframe的高度

    4.解释一下,在子页面里动态创建的iframe跟当前子页面的父级页面是同一个域名,这样就不存在跨域问题了。



    举例:
             假设父页面的域名是www.a.com,页面名字是A.html;子页面的域名是www.b.com,页面名字是B.html

    父页面A.html的内容如下:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.     <meta content="text/html; charset=gb2312" http-equiv="Content-Type">  
    5. </head>  
    6.     <body>  
    7.     <iframe height='200px' id='iframe1' src="http://www.b.com/B.html"></iframe>  
    8. </body>  
    9. </html>  




    父级页面所在域名下的用于调节iframe高度的页面setHeight.html内容如下:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.     <meta content="text/html; charset=gb2312" http-equiv="Content-Type">  
    5. </head>  
    6.     <body>  
    7.         <div></div>  
    8.         <script type="text/javascript">  
    9.             window.onload = function()  
    10.             {  
    11.                 var b_iframe = parent.parent.document.getElementById("iframe1");  
    12.                 var hash_url = window.location.hash.split("#");  
    13.                 var hash_height = hash_url[1]+"px";  
    14.                 b_iframe.style.height = hash_height;  
    15.             }  
    16.         </script>  
    17.     </body>  
    18. </html>  



    子页面B.html内容如下:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    5. </head>  
    6. <body style="background-color:#ccc">  
    7.     <div style="height:600px;">sdfsfsssfsfs</div>  
    8.     <script>  
    9.         window.onload = function()  
    10.         {  
    11.             var iframe = document.createElement("iframe");  
    12.             iframe.width='0px';  
    13.             iframe.height='0px';  
    14.             var currentheight = document.body.scrollHeight;  
    15.             iframe.src='http://www.a.com/setHeight.html#'+currentheight;  
    16.             document.body.appendChild(iframe);  
    17.         }  
    18.     </script>  
    19. </body>  
    20. </html>  


    可见默认的iframe高度是200px,而iframe中B.html的实际高度至少为600px,当B.html加载完成时,会自动调整其父页面iframe的高度
  • 相关阅读:
    自习任我行第二阶段个人总结5
    自习任我行第二阶段个人总结4
    自习任我行第二阶段个人总结3
    自习任我行第二阶段个人总结2
    自习任我行第二阶段个人每日总结1
    bootstrap table
    log4j2 的使用
    新版本MySQL Server 5.7的免安装版本设置
    工作随笔 2016-5-19
    在windows 下安装启动redis
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13317549.html
Copyright © 2020-2023  润新知