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出于对安全性的考虑,而禁止两个或者多个不同域的页面进行互相操作。

相同域的页面在相互操作的时候不会有任何问题。

Js动态获取iframe子页面的高度////////////////////////zzzz的更多相关文章

  1. Js动态获取iframe子页面的高度总结

    问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置 ...

  2. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

  3. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  4. Js获取iframe子页面全局变量

    项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window. ...

  5. js动态获取浏览器或页面等容器的宽高

    首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei ...

  6. iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素

    一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...

  7. 获取iframe子页面节点,响应浏览器宽高

    获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...

  8. 如何实现跨域获取iframe子页面动态的url

    有的时候iframe的子页面会动态的切换页面,我们在父页面通过iframe1.contentWindow.window.location只能获取同源的子页面的信息.获取跨域的子页面信息会报错. 这时可 ...

  9. JS 中根据iframe子页面自动iframe高度

    注意:为使页面有更好的兼容性,在使用以下代码前,请将aspx页中头部的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...

随机推荐

  1. activity 、window与view的关系(下)

    在activity的attacth方法中,通过policymanager 的makenewwindow来创建window 而window的具体实现是phonewindow 接下来通过setconten ...

  2. 踩坑事件:不能对基于文本的临时表使用sql insert语句

    先来描述一下问题: 如果你是从基于文本的数据源来创建DataFrame的,当你将DataFrame注册为临时表后,如果对这个临时表进行insert into 操作,会抛出异常的. 问题答案参见:htt ...

  3. 【BZOJ】3437: 小P的牧场

    题意 n个点,需要再一些点建立控制站,如果在第\(i\)个建站,贡献为\(a[i]\).假设前一个站为\(j<i\),则\([j+1, i]\)的点的贡献是\(\sum_{k=j+1}^{i} ...

  4. java分享第七天-03(递归打印文件目录的树状结构)

    public static void main(String[] args) { File file= new File("e:/list"); printFile(file, 0 ...

  5. ios 实现自定义状态栏StatusBar 和 导航栏navigationBar 的状态和颜色

    很多app中可以看到不同与导航栏的状态栏的颜色,他妈的真绕嘴. 一.更改状态栏颜色 (StatusBar) 就是比如导航栏是红色的状态栏是绿色的. 要实现这样的效果其实很简单,就是添加一个背景view ...

  6. ZOJ 2771

      Description Considering a light entering three adjacent planes of glass. At any meeting surface, t ...

  7. Java工具Eclipse

    一.下载Eclipse 从官网渠道下载或从公司共享软件目录下载均可.    a) http://www.eclipse.org/downloads/eclipse-packages/          ...

  8. Mybatis与Spring整合,使用了maven管理项目,作为初学者觉得不错,转载下来

    转载自:http://www.cnblogs.com/xdp-gacl/p/4271627.html 一.搭建开发环境 1.1.使用Maven创建Web项目 执行如下命令: mvn archetype ...

  9. crontab 管理指定用户的定时任务

    创建用户定时任务文件 touch /var/spool/cron/target_user crontab -u target_user /var/spool/cron/target_user 编辑用户 ...

  10. Sublime Text的心得经验。 全面

    Sublime Text的心得经验.jikeytang/sublime-text · GitHub