iframe自适应高度解决方案

经常会有父页面需要通过iframe嵌入另一个子页面,又要适时 根据子页面的高度调整父页面中iframe的高度，这就要求 页面必须具有自适应功能。自适应思想比较简单：就是父页面中iframe高度必须要适时根据子页面 高度进行调整。 由于涉及到js操作，因此对于不同域名的自适应解决方案有所不同，主要是在解决跨域问题。 

·   对于同父级域名下的自适应高度：jipiao.taobao.com/index.htm 页面中嵌入jiudian.taobao.com/xxx.htm页面 

        

  1.0   http://jipiao.taobao.com/index.htm中关键代码 

  

view plaincopy to clipboardprint?

1. <iframe id="J_selfAdapting" src="http://jiudian.taobao.com/xxx.htm" mce_src="http://jiudian.taobao.com/xxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe>  

页面增加如下JS: 

view plaincopy to clipboardprint?

1. <mce:script type="text/javascript"><!--  

2.  (function(){  

3.     /** 

4.      *  获取当前域 

5.      **/  

6.     function _getDomain(){  

7.         var _hostname = window.location.hostname.toString();  

8.         var _hosts = _hostname.split(".");  

9.         var _len = _hosts.length;  

10.         if(_len>2){  

11.             return _hosts[_len-2]+"."+_hosts[_len-1];  

12.         }  

13.         return _hostname;  

14.     }  

15.     document.domain = _getDomain();  

16. })();  

17. // --></mce:script>   

2.子页面http://jiudian.taobao.com/xxx.htm 中嵌入如下代码。即可。 

view plaincopy to clipboardprint?

1. <mce:script type="text/javascript"><!--  

2. (function(){  

3.     /** 

4.      *  获取当前域 

5.      **/  

6.     function _getDomain(){  

7.         var _hostname = window.location.hostname.toString();  

8.         var _hosts = _hostname.split(".");  

9.         var _len = _hosts.length;  

10.         if(_len>2){  

11.             return _hosts[_len-2]+"."+_hosts[_len-1];  

12.         }  

13.         return _hostname;  

14.     }  

15.      

16.     window.onload = function()  

17.          {  

18.             //设置子页面的域  

19.             document.domain=_getDomain();  

20.             function _setHeight()  

21.             {  

22.                if (window.parent != window)  

23.                {  

24.                   try  

25.                   {  

26.                       //设置父级iframe的高度  

27.                      parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';  

28.                   }  

29.                   catch(e)  

30.                   {  

31.                   }  

32.                }  

33.                //每隔2s设置一次，主要为了兼容子页面加载完毕之后高度再变化  

34.                setTimeout(_setHeight,2000);  

35.             }  

36.             //子页面加载完毕之后调用一次  

37.             _setHeight();  

38.         }  

39. })();  

40. // --></mce:script>   

· 不同父级页面，例如jipiao.taobao.com, www.koubei.com域名完全不一样，解决办法是使用一个代理页面jipiao.taobao.com/proxy.htm jipiao.taobao.com/index.htm页面嵌入 www.koubei.com/xxxx.htm，而xxx.htm需要隐藏嵌入jipiao.taobao.com/proxy.htm做为代理，可以 将高度写在后面jipiao.taobao.com/proxy.htm#500，表示500px高度。 

   1.jipiao.taobao.com/index.htm页面中关键代码： 

   

view plaincopy to clipboardprint?

1. <iframe id="J_selfAdapting" src="http://www.koubei.com/xxxx.htm" mce_src="http://www.koubei.com/xxxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe>  

增加如下JS: 

view plaincopy to clipboardprint?

1. <mce:script type="text/javascript"><!--  

2.  (function(){  

3.     /** 

4.      *  获取当前域 

5.      **/  

6.     function _getDomain(){  

7.         var _hostname = window.location.hostname.toString();  

8.         var _hosts = _hostname.split(".");  

9.         var _len = _hosts.length;  

10.         if(_len>2){  

11.             return _hosts[_len-2]+"."+_hosts[_len-1];  

12.         }  

13.         return _hostname;  

14.     }  

15.     document.domain = _getDomain();  

16. })();  

17. // --></mce:script>   

2. www.koubei.com/xxxx.htm 中关键代码： 

view plaincopy to clipboardprint?

1. <iframe scrolling="no" frameborder="0" style="display: none;" mce_style="display: none;" src="http://jipiao.taobao.com/proxy.htm#597" mce_src="http://jipiao.taobao.com/proxy.htm#597" id="taobaoIframe">  

2. </iframe>  

view plaincopy to clipboardprint?

1. <mce:script type="text/javascript"><!--  

2. (function(){  

3. var pageHeight = document.body.scrollHeight;  

4.  document.getElementById('taobaoIframe').src = 'http://jipiao.taobao.com/proxy.htm#' + pageHeight;  

5. })();   

6. // --></mce:script>   

3.在代理页面jipiao.taobao.com/proxy.htm中所有的代码如下： 

view plaincopy to clipboardprint?

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=GBK" />  

5. </head>  

6. <body>  

7. <mce:script type="text/javascript"><!--  

8.   (function(){  

9.     /**  

10.      *  获取当前域  

11.      **/  

12.     function _getDomain(){  

13.         var _hostname = window.location.hostname.toString();  

14.         var _hosts = _hostname.split(".");  

15.         var _len = _hosts.length;  

16.         if(_len>2){  

17.             return _hosts[_len-2]+"."+_hosts[_len-1];  

18.         }  

19.         return _hostname;  

20.     }  

21.     document.domain = _getDomain();  

22.     var height = window.location.hash.substring(1);  

23.     try{  

24.         var el = window.top.document.getElementById('J_selfAdapting');  

25.         if(el) {  

26.             el.style.height = height + 'px';  

27.         }  

28.     }  

29.     catch (e) {}  

30. })();  

31. // --></mce:script>   

32. </body>  

33. </html>