获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素
最近接手了别人的项目,别人用到了iframe,自己在实战中总结了一些关于iframe的小问题。
获取Iframe页面高度并赋值给Iframe
Html
<iframe name="container_ifranme" id="iframeId" scrolling="no" frameborder="no" border="0" src="home.html" onLoad="iFrameHeight()" ></iframe>
Js
function iFrameHeight() {
var ifm= document.getElementById("iframeId");
var subWeb = document.frames ? document.frames["iframeId"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.style.height = 'auto';//关键这一句,先取消掉之前iframe设置的高度
ifm.style.height = subWeb.body.scrollHeight+'px';
}
};
获取iframe里的元素
1,contentWindow:是用来获取子窗口的window对象的,它兼容各大浏览器,用法如下
document.getElementById("iframeId").contentWindow
这样简单的一句就得到了iframe包含页面的window对象;
2,contentDocument:是用来获取子窗口的document对象的,主流浏览器都支持和ie8+支持,用法如下
document.getElementById("iframeId").contentDocument
这样简单的一句就得到了iframe包含页面的document对象;
以上两种方法是在父窗口中获取到子窗口,既然我们都能拿到子窗口window对象和document对象了,那么子窗口内其他的操作就easy了 !
如果要通过子窗口A访问到同级的子窗口B,那么我们可以在子窗口A中这么来做:
parent.getElementById("iframeId").contentWindow.document.getElmentById("frameId_B")
或者parent.getElementById("iframeId").contentDocument.getElmentById("frameId_B")就得到B窗口了。
获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素的更多相关文章
- html页面嵌套两个iframe页面导致第二个iframe页面高度失效的问题
1:这是因为最里面嵌套的iframe页面html和body高度无法设置问题,我的解决办法是js去控制iframe高度 2:js获取最子页面(content内容区域)的高度 var ifremHeigh ...
- 在Servlet端获取html页面选中的checkbox值,request获取页面checkbox(复选框)值
html端代码: 选项框: <input type="checkbox" name="crowd" value="选项一">选项 ...
- iframe 自适应高度、父子页面传值、回调
总结一下最近用iframe遇到的问题与解决办法: 结构:主页面main.html,里面套用iframe.iframe不能出现滚动条,自适应子页面高度.内容多了滚动条是main.html页面的. 1. ...
- iframe的高度自适应
http://www.cnblogs.com/snandy/p/3902337.html http://www.cnblogs.com/snandy/p/3900016.html Snandy Sto ...
- 同域iframe的高度自适应
引子 父页面里控制子页面 子页面里控制父页面 一.引子 我们先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 1.html <!DOCTYPE html ...
- JQuery iframe宽高度自适应浏览器窗口大小的解决方法
iframe宽高度自适应浏览器窗口大小的解决方法 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...
- Asp.net MVC访问框架页中嵌套的iframe页面时,如果session或cookie过期,登录验证超时怎样自动跳转到登录页
一般登录验证的过滤器中,使用验证过滤器的Redirect方法,将请求重定向到指定的URL.但是如果我们要访问的页面是一个嵌套在框架页中的iframe页面时,这种重定向只会对iframe页面凑效,也就是 ...
- iframe自适应高度(转)
iframe自适应高度 (2013-04-23 17:29:49) 标签: iframe 高度 自适应 js 杂谈 分类: 网页制作 有时候我们的网站需要引入其他网站的东西,比如评论,这时候就需要使用 ...
- jquery获取高度错误(可以获取到宽度,但获取不到高度),及解决办法
<div class="foo"> <div style="display: none;"> 3333333 </div> ...
随机推荐
- js导出excel表格并生成多sheet
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python算法练习--把搜索树转成双向链表
本文目前分享的题目都是来自于July的分享,然后把具体算法实现.搜索树转双向链表主要的实现逻辑是在中序遍历时,调整节点的左右子树:因为中序遍历是递归调用,所以在调整时一定要注意调整的位置,如果写错了, ...
- 注解ConfigurationProperties注入yml配置文件中的数据
在使用SpringBoot开发中需要将一些配置参数放在yml文件中定义,再通过Java类来引入这些配置参数 SpringBoot提供了一些注解来实现这个功能 ConfigurationProperti ...
- 主机与虚拟机都可以上网,但是互相ping不通
问题:主机与虚拟机都可以上网,但是互相ping不通 可能:相关入站规则没有启用 解决:第4步双击后,打勾设置“已启用”
- 小白学习Python之路---开发环境的搭建
本节内容 1.Python的介绍 2.发展史 3.安装Python 4.搭建开发环境 5.Hello World程序 一.Python的介绍 Python的创始人为荷兰人吉多·范罗苏姆(Guido v ...
- java中的int与byte的转化
java中的int与byte的转化 1.基础准备 1.1.原码 就是二进制码,最高位为符号位,0表示正数,1表示负数,剩余部分表示真值 1.2.反码 在原码的基础上,正数反码就是他本身,负数除符号位之 ...
- 每日分享!介绍Css 盒模型!
如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...
- 从零开始学习PYTHON3讲义(九)字典类型和插入排序
<从零开始PYTHON3>第九讲 第六讲.上一讲我们都介绍了列表类型.列表类型是编程中最常用的一种类型,但也有挺明显的缺陷,比如: data = [5,22,34,12,87,67,3,4 ...
- Linux网络技术管理及进程管理(week2_day4)--技术流ken
OSI七层模型和TCP/IP四层模型 OSI七层模型:OSI(Open System Interconnection)开放系统互连参考模型是国际标准化组织(ISO)制定的一个用于计算机或通信系统间互联 ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...