Js动态获取iframe子页面的高度////////////////////////zzzz

Js动态获取iframe子页面的高度

 

Js动态获取iframe子页面的高度总结 问题的原因 产品有个评论列表引用的是个iframe，高度不固定因而引起这个总结。 方法1：父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的，经过获取子级页面的高度给iframe设置高度 涉及了一些兼容问题: IE用attachEvent | 3C用onload来判断子页面是否加载完成。 IE用contentWindow | 3C用contentDocument来获取子页面 IE用document.documentElement.scrollHeight（兼容ie6 ie7）| 3C用body.scrollHeight获取页面高度 function setIframeHeight(id){ try{ var iframe = document.getElementById(id); if(iframe.attachEvent){ iframe.attachEvent("onload", function(){ iframe.height = iframe.contentWindow.document.documentElement.scrollHeight; }); return; }else{ iframe.onload = function(){ iframe.height = iframe.contentDocument.body.scrollHeight; }; return; } }catch(e){ throw new Error('setIframeHeight Error'); } } 方法2：子级页面给父级页面元素设置高度 这方法是用在子级页面里的，经过获取子级页面的高度给父级iframe设置高度 子级页面经过parent获取父级iframe 给iframe设置高度，兼容同方法1。 缺点是刷父级页面时iframe有缓存，需求清理缓存才能生效。 function setParentIframeHeight(id){ try{ var parentIframe = parent.document.getElementById(id); if(window.attachEvent){ window.attachEvent("onload", function(){ parentIframe.height = document.documentElement.scrollHeight; }); return; }else{ window.onload = function(){ parentIframe.height = document.body.scrollHeight; }; return; } }catch(e){ throw new Error('setParentIframeHeight Error'); } } 须要注意的跨域操做 若是两个页面有一种状况，两个子域名：   aaa.xxx.com bbb.xxx.com 须要将两个页面都设置如： document.domain ="xgo.com.cn"; 这样这两个页面就能够互相操做了。也就是实现了同一基础域名之间的"跨域"。 利用document.domain实现跨域： 前提条件：这两个域名必须属于同一个基础域名!并且所用的协议，端口都要一致，不然没法利用document.domain进行跨域 Javascript出于对安全性的考虑，而禁止两个或者多个不一样域的页面进行互相操做。 相同域的页面在相互操做的时候不会有任何问题。