A-A+

javascript中IFrame跨域高度自适应实现代码

2016年01月18日 web前端设计 暂无评论 阅读 5 views 次

下面详细介绍了IFrame跨域高度自适应解决办法,主要是讲述了同域和跨域的js处理方法。

同域时Iframe高度自适应

下面的代码兼容IE/Firefox浏览器,控制id为“iframeid”的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。

另外,请注意此解决方案仅供同域名下使用,代码如下:

  1. <script type="text/javascript">   
  2.     
  3.     function SetCwinHeight(){   
  4.    
  5.     var iframeid=document.getElementById("iframeid"); //iframe id  
  6.   
  7.     if (document.getElementById){  
  8.   
  9.     if (iframeid && !window.opera){  
  10.   
  11.     if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){  
  12.   
  13.     iframeid.height = iframeid.contentDocument.body.offsetHeight;  
  14.   
  15.     }else if(iframeid.Document && iframeid.Document.body.scrollHeight){  
  16.   
  17.     iframeid.height = iframeid.Document.body.scrollHeight; }} } }  
  18.     </script>  
  19.     <iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="kimi.php"></iframe>  

跨域时Iframe高度自适应

在主页面和被嵌套的iframe为不同域名的时候,就稍微麻烦一些,需要避开JavaScript的跨域限制。

原理:现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个,通过main.html(域名为http://www.ccvita.com)嵌套iframe.html(域名为:http://www.phpq.net),当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度,agent.html(域名为:http://www.ccvita.com)取得传递的高度,通过JavaScript设置main.html中iframe的高度。最终实现预期的目标。
iframe主页面main.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><title>iframe主页面</title></head>  
  4. <body>  
  5. <div style="border:1px solid #ccc;padding:10px;"><iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe></div><br />尾部<br /></body>  
  6. </html>  

iframe嵌套页面iframe.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><title>被iframe嵌套页面</title></head>  
  4. <body>  
  5. 文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>  
  6. <script type="text/javascript">  
  7.  function sethash(){  
  8. hashH = document.documentElement.scrollHeight;  
  9. urlC = "agent.html";  
  10. document.getElementById("iframeC").src=urlC+"#"+hashH;  
  11.  }  
  12. window.onload=sethash;  
  13.  </script>  
  14. </body>  
  15. </html>  

iframe中介页面agent.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><title>iframe中介页面</title></head>  
  4. <body>  
  5. <script>  
  6. function pseth() {  
  7. var iObj = parent.parent.document.getElementById('frame_content');  
  8. iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;  
  9. iObj.style.height = iObjH.split("#")[1]+"px";  
  10. }  
  11. pseth();   
  12.  </script>  
  13.  </body>  
  14. </html>  

UPDATE:长期以来一直有网友说方案不能跨域,今天我重新又测试了下,确定在IE6、IE7、IE8、IE9、Firefox全系列、Chrome全系列均可以成功跨域控制高度。请注意以下要点

第一,修改main.html文件中iframe的src地址为需要跨域的域名(比如xiariboke.sinaapp.com)

第二,修改iframe.html文件中的urlC值为源域名(比如www.xiariboke.com.com)这点最重要

解决跨域iframe自适应高度

下面直接上代码了,下面是核心代码loader.js,代码如下:

  1. /** 
  2. * 跨域iframe自适应高度解决方案 
  3. * Author: changyin@taobao.com <https://www.xiariboke.com> 
  4. * Copyright (c) 2011, Taobao Inc. All rights reserved. 
  5. */  
  6.    
  7. var Loader = new function(){  
  8. var doc = document,body = doc.body,  
  9. self = this,  
  10.    
  11. //获取url中的参数  
  12. getRequest = function(name) {  
  13. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"),  
  14. r = window.location.search.substr(1).match(reg);  
  15. return (r!=null)? unescape(r[2]) : null;  
  16. },  
  17.    
  18. //获取配置,script的优先级大于url中的参数  
  19. getConfig = function(){  
  20. var scripts = doc.getElementsByTagName('script'),  
  21. script = scripts[scripts.length - 1];  
  22. return function(param){  
  23. var p = script.getAttribute(param);  
  24. return p? p : getRequest(param);  
  25. };  
  26. }(),  
  27.    
  28. //代理高度  
  29. proxyheight = 0,  
  30.    
  31. //top页frame的id  
  32. frameid = getConfig("data-frameid"),  
  33.    
  34. //监听实时更新高度间隔  
  35. timer = getConfig("data-timer"),  
  36.    
  37. //获取代理的url  
  38. getProxyuUrl = getConfig("data-proxy"),  
  39.    
  40. //创建代理的iframe  
  41. proxyframe = function(){  
  42. var el = doc.createElement("iframe");  
  43. el.style.display = "none";  
  44. el.name="proxy";  
  45. return el;  
  46. }();  
  47.    
  48. //重置高度  
  49. this.resize = function(){  
  50. proxyheight = body.offsetHeight;  
  51. proxyframe.src = getProxyuUrl + "?data-frameid=" + frameid+ "&data-frameheight=" + (proxyheight+40);  
  52. }  
  53.    
  54. this.init = function(){  
  55. var init = function(){  
  56. body.appendChild(proxyframe);  
  57. self.resize();  
  58. //是否update  
  59. if(!isNaN(timer)){  
  60. timer = timer<500?500:timer;  
  61. window.setInterval(function(){  
  62. if(body.offsetHeight != proxyheight){  
  63. self.resize();  
  64. }  
  65. },timer);  
  66. };  
  67. };  
  68. if(doc.addEventListener){  
  69. window.addEventListener("load",init,false);  
  70. }else{  
  71. window.attachEvent("onload",init);  
  72. }  
  73. //如果引入了JS框架,建议将上面一句改掉 例如:KISSY.ready(function(){init();});  
  74. }  
  75. };  
  76.   
  77. Loader.init();  

代理文件proxy.html,代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>proxy</title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>  
  6. <body>  
  7. <script>  
  8. (function() {  
  9. var getRequest = function(name) {  
  10. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"),  
  11. r = window.location.search.substr(1).match(reg);  
  12. return (r!=null)? unescape(r[2]) : null;  
  13. },  
  14. height = getRequest("data-frameheight");  
  15. try {  
  16. var el = window.top.document.getElementById(getRequest("data-frameid"));  
  17. if (!el) return;  
  18. el.style.height = height + 'px';  
  19. }  
  20. catch (e) {  
  21. //console.log(e);  
  22. }  
  23. })();  
  24. </script>  
  25. </body>  
  26. </html>  

使用方法:

一、在主页面要包含的iframe中引入loader.js

二、传入参数。有两种传参方法:

1.在主页面引用iframe的时候传参,将参数接在要引用的iframe的url后面

例如,代码如下:

  1. <iframe id=”testframe” src=”a.html?data-frameid=testframe&data-auto=200&data-proxy=proxy.html”></iframe>  

2.iframe页面包含loader.js的时候传入,例如如下代码:

  1. <script src=”loader.js” data-frameid = “testframe” data-timer = “2000″ data-proxy = “proxy.html” ></script>  

给我留言