超简单的跨域iframe高度自适应的页面——从金山导航接入历史上的今天内容说起大家学习一下技术吧!我找了很久，这个算不错的了。
在实际的项目进行中，很多地方可能由于历史原因不得不去使用iframe，包括目前正火热的应用开发也是如此。
随之而来的就是在实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便。
于是自动调整iframe的高度就成为本文的重点。
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引发出同域、跨域两种情况。
1.期待中发现2014年12月，通过cnzz统计注意到几个特殊的来路(/tiyan.html) tiyan体验版，个人判断是内部测试版本，过段时间就会上线的，那么我的“历史上的今天”又和上首页啦，11月刚上“中国搜索”首页！这可是又一次惊喜了！10日，金山导航的BD郑皓月联系上了我，说：“我们二级页想接入你们历史上的今天的内容~ ”。
我问：具体我们要怎样和贵方换量呢？我们之前和 合作过这种形式郑回：你和hao123当时的是按照什么比例换滴我答：/lishi/底部有个“历史上的今天”，当时是没有换的，是他们免费给我做的，但后来军事类top81打入，接hao123通知，没办法被换了。
只留在顶部给我们保留个链接。
总结：专业不如商业——这是铁的事实2.印证：天上掉下的林妹妹，没见了！接下来，我们讨论如何换量，两个不对称的网站如何换量呢？郑说：“每天有1w的流量，希望能你们也给我们一些位置，给我们导入流量，2:1的方式可以吗？（我们给你们1w 你们给我们5k ）”我说：“这个量估计无法达到，原因是：有些用户是通过邮箱订阅（QQ邮箱5万订阅，139邮箱也近5万，网易云阅读5万多）以及网络媒体编辑的转载，实际来到我们网站的流量已经很少了。
我们还采用以绿色公益等方式保持界面清晰来，这样网站广告位就更少”最后，皓月跟产品经理沟通下这下情况，同意了不换量的合作，只在首页做个不能保证流量多少广告条展示品牌。
而他们能够在二级目录通过 iframe直接调用到我们的内容。
皓月把我拉入QQ讨论群，用了几天时间相互协作完成了iframe页面，在此佩服一下金山的几名员工，下午直到晚上，中间没有休息吃饭的在QQ谈论群中聊工作。
原因很简单，duba已经把首页“历史上的今天”链接改为/lssdjt.html了。
又喜又悲，网站几何？3.iframe高度自适应的页面通过这次交流，感受到“金山精神”值得肯定，虽然不能获得更多的流量，但也是一次品牌宣传，让更多的用户了解我们，一个坚持了十年多的老站长，专注于“历史”与“今天”，“镜子”与“现实”的融合。
同时技术也得到提升，如跨域iframe 高度自适应的页面问题，一开始，我们提供的页面是同域自适应高度，代码如下：/*同域可以使用，但跨域就不能用了。
*/function IFrameResize() {//alert(this.document.body.scrollHeight); //弹出当前页面的高度var obj = parent.document.getElementById("duba_lssdjt_frame"); //取得父页面IFrame对象 //alert(obj.height); //弹出父页面中IFrame中设置的高度if (obj) {obj.style.height = document.getElementById("list").offsetHeight + "px"; //调整父页面中IFrame的高度为此页面的高度//alert("调节高度："+document.getElementById("list").offsetHeight);}}4.跨域iframe高度自适应的页面iframe跨域高度自适应以前遇到过，但没有弄成功，这次可以向duba技术们请教如何开展了。
首先 xx 发给我一个iframe 高度自适应的页面.rar因为遇到周六日，大家都放假，我只好下载来晚上慢慢研究，结果就是弄不明白，因为调试过程需要双方的配合，毕竟是“跨域”，所以“单独”就老是弄不好，加上技术这方面有点呆的我。
经过几天和金山导航的技术员耐心细语的交流，大概总结“跨域”高度自适应的方法如下：一、A站要建立2个页面：/lssdjt.html，lssdjt.html页面通过iframe调用B站数据源，代码如下：<iframe id="duba_lssdjt_frame" src="/duba.htm" width="1000"height="1550" scrolling="no" frameborder="0"></iframe>在建立第2个页面：/lssdjt/iframe_lssdjt_height.html，代码如下：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>iframe跨域高度自适应</title><script type="text/javascript">try {//document.domain='';var start = self.location.href.indexOf("#");var end = self.location.href.length;var height = self.location.href.substring(start + 1, end);height = parseInt(height) + 10;if (height < 680){height = 680;}top.document.getElementById("duba_lssdjt_frame").style.height = height + "px";}catch(e){}</script></head><body></body></html>二、B站要建立1个页面：/duba.htm，duba.htm为数据源，高度自动变化，页面要引入jquery并在其底部插入js代码，如下：/*跨域高度自适应的页面*/(function($){$(function(){var $_box = $('.wrap');var mentHeight =$_box.outerHeight()+parseInt($_box.css('marginTop'))+parseInt($_box.css('marginBottom'));var frame = $('<iframesrc="/lssdjt/iframe_lssdjt_height.html?lishijintian#'+mentHeight+'"/>').css ({display: 'none'});$('body').append(frame);setInterval(function(){var bodyHeight =$_box.outerHeight()+parseInt($_box.css('marginTop'))+parseInt($_box.css('marginBottom'));if(bodyHeight == mentHeight){return false;}mentHeight = bodyHeight;frame.remove();frame = $('<iframesrc="/lssdjt/iframe_lssdjt_height.html?lishijintian#'+mentHeight+'"/>').css ({display: 'none'});$('body').append(frame);},500);});})(jQuery);三、原理：A站页面lssdjt.html通过iframe调用B站duba.htm时，当页面duba.htm高度发生变化时，页面duba.htm通过自身的代码向/lssdjt/iframe_lssdjt_height.html这个页面发送高度参数，这时A站页面iframe_lssdjt_height.html接收高度数值后，调整同域页面lssdjt.html的高度，这样就实现跨域高度自适应了。
总结，通过百度搜索：IFrame跨域高度自适应实现代码，能够查找很多，我有的测试过，也有只浏览而已，但总结都没有以上代码简单，思路清晰。
希望大家能够借鉴，同时谢谢金山网址导航越办越好！——2014年12月。