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. css记录

    padding padding-top是在绿色边框内,从顶部向下移20像素位置,默认padding-top 为0时,红色边框为20像素高,通过padding-top属性,为顶部增加了20像素,这时顶部 ...

  2. Spring-AOP面向切面编程

    AOP是面向切面编程,区别于oop,面向对象,一个是横向的,一个是纵向. 主要解决代码分散和混乱的问题. 1.概念: 切面:实现AOP共有的类 通知:切面类中实现切面功能的方法 连接点:程序被通知的特 ...

  3. doT.js详细介绍

    doT.js详细介绍   doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolati ...

  4. CSS实现元素水平/垂直居中的方法

    首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种: 1.    在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin: 1 2 3 4 body{     wi ...

  5. nginx域名隐性(地址栏域名不变)跳转

    1.完全url的域名隐性跳转 server_name a.b.com location / { proxy_pass http://x.y.com; } 效果:浏览器地址栏中输入a.b.com域名不变 ...

  6. C register

    1.register修饰符暗示编译程序相应的变量将被频繁地使用,如果可能的话,应将其保存在CPU的寄存器中,以加快其存储速度.例如下面的内存块拷贝代码, /* Procedure for the as ...

  7. linux内核分析作业:以一简单C程序为例,分析汇编代码理解计算机如何工作

    一.实验 使用gcc –S –o main.s main.c -m32 命令编译成汇编代码,如下代码中的数字请自行修改以防与他人雷同 int g(int x) { return x + 3; } in ...

  8. SQL语法整理

    SQL是Structured Query Language的缩写,中文全名为结构化查询语言,是一种用于数据存储,查询,更新和管理的关系数据库系统. SQL语法 创建表 create table tab ...

  9. Composer 学习笔记

    Composer 是 PHP 的一个依赖管理工具(据说是最优秀的).它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们.目前很多项目以Composer 作为依赖管理工具,目前正在学习yii2 ...

  10. find_elements后点击不了抓取的元素

    1.莫名其妙抓不到元素,要去看句柄,是不是没有切换 h=driver.current_window_handle nh=driver.window_handles for i in nh: if i! ...