超简单的跨域iframe高度自适应的页面

超简单的跨域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站数据源，代码如

下：

在建立第2个页面：/lssdjt/iframe_lssdjt_height.html，代码如下：