跨域iframe动态设置高度

最新推荐文章于 2022-10-14 11:38:16 发布

nelson

最新推荐文章于 2022-10-14 11:38:16 发布

阅读量1k

点赞数

分类专栏： HTML Javascript 文章标签： iframe function domain google 测试 null

本文链接：https://blog.csdn.net/Do_it__/article/details/6059224

版权

Javascript 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

思想可以参考：http://www.cnblogs.com/yuzhongwusan/archive/2009/01/07/1371063.html

首先写一个需要插入的文件。定为：http://10.13.190.76/daily/index.html 内容如下：

<!doctype html> <html> <head> <meta charset="gbk"> <title>First Grid Demo</title> </head> <body> <iframe frameborder="0" id="crossFrame" name="crossFrame" width="100%" scrolling="no" src="http://demo.ued.taobao.net/yansong/daily/1206/test.html" mce_src="http://demo.ued.taobao.net/yansong/daily/1206/test.html"></iframe> <p>上面是测试自动适应高度的iframe</p> </body> </html>

然后写上面的iframe（http://demo.ued.taobao.net/yansong/daily/1206/test.html），内容如下：

<!doctype html> <html> <head> <meta charset="gbk"> <title>First Grid Demo</title> <mce:script src="http://10.13.190.76/daily/proxy.js" mce_src="http://10.13.190.76/daily/proxy.js"></mce:script> </head> <body> <p>this is a test document</p> <h1>What’s new in Google Docs?</h1> <p>We’re still working to make Google Docs a better place, and we’re listening closely to your suggestions. If you have anything you’d like to tell us, don’t hesitate to let us know, and keep checking back for additions and improvements.</p> <p id="p">sdffffffffffffffffffffff</p> <mce:script type="text/javascript"></mce:script> </body> </html>

然后写一个与之对应的proxy.js，内容如下：

crossFrame = (function(){ var handle = {}; // 如果当前页面的域为我的淘宝就马上执行，但是本身这个js的域也和我的淘宝不一样，也就不能执行下面的语句了， // 所以忽略，还是在对应的页面里加上里面的那句话：window.top... /*if(/taobao/.com/.test(document.domain)){ window.top.document.getElementById('crossFrame').style.height = document.location.hash.substring(1)+'px'; }*/ // 当引用的iframe高度随时变化时使用： // 外部调用时为： setInterval(crossFrame.setHeight, 500); handle.setHeight = function(){ var frame = document.getElementById('crossFrame'); if(!frame)return; if(frame.src.split('#')[1] != document.body.scrollHeight){ frame.parentNode.innerHTML = frame.parentNode.innerHTML.replace(/#(?:.*?)"/,['#',document.body.scrollHeight.toString(),'"'].join('')); } frame = null; } //第一次设置iframe的高 //url可以自己设置，形式自己定，可以加http://也可以不加。默认为我的淘宝的一个页面 handle.init = function(url){ var el = document.createElement('div'), height = document.body.scrollHeight, arr=['<iframe src="http://']; el.style.display = 'none'; document.body.appendChild(el); arr.push(url ? url.replace(/(?:http:)/, '') : '10.13.190.76/daily/myProxy.htm'); arr.push('#'); arr.push(height); arr.push('" style="display:none" mce_style="display:none" id="crossFrame"></iframe>'); el.innerHTML = arr.join(''); //避免多次调用 handle.init = function(){}; el = null; } return handle; })();

最后写一个myProxy：http://10.13.190.76/daily/myProxy.htm，内容如下：

<!doctype html> <html> <head> <meta charset="gbk"> <title>设置第三方iframe高度</title> </head> <body> <mce:script type="text/javascript"></mce:script> </body> </html>

OK了，经过测试一切正常，一个跨域的iframe自适用高度就出现了。细节没时间说，看源代码吧。

开始线上测试了，bug出现了，由于自己当时没有细心去观察crossFrame.init()的摆放位置，导致的结果是第三方在head里就加上了<script>crossFrame.init()</script>然后就是js报错，说取不到document.body。其实嘛就是在它运行的时候document.body都还没有加载又如何能获得到它的高度呢？自然就会报错了。

解决了这个问题然后又发现新的问题，就是域名不对。i.taobao.com/my_taobao.htm的domain是taobao.com而我这个myProxy.htm的域名是i.taobao.com所以又出错了。最后看了一下淘江湖的代码：

function _domain(){ var _hostname = window.location.hostname.toString(); var _hosts = _hostname.split("."); var _len = _hosts.length; if(_len>2){ return _hosts[_len-2]+"."+_hosts[_len-1]; } return _hostname; } document.domain = _domain();

然后在myProxy.htm里加上这段js，然后通过fiddler替换传输过来的文件myProxy.htm。OK！高度自适应完美展现出来了。