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>