超简单的跨域ifrme高度自适应的页面.docVIP

超简单的跨域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); } } iframe id=duba_lssdjt_frame src=/duba.htm width=1000 height=1550 scrolling=no frameborder=0/iframe ????在建立第2个页面：/lssdjt/iframe_lssdjt_height.html?，代码如下： !DOCTYPE htmlhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titleiframe跨域高度自适应/titlescript type=text/javascripttry {//document.domain=;v