Js动态获取iframe子页面的高度总结
2015-07-29 11:02
573 查看
问题的缘由
产品有个评论列表引用的是个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出于对安全性的考虑,而禁止两个或者多个不同域的页面进行互相操作。
相同域的页面在相互操作的时候不会有任何问题。
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- JQuery与iframe交互实现代码
- 用expression的一行代码解决iframe挂马的问题
- 用jquery修复在iframe下的页面锚点失效问题
- Firefox返回时Iframe的显示Bug的解决方法
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- smarty巧妙处理iframe中内容页的代码