获取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> ... 
随机推荐
- pytest框架之命令行参数2
			前言 上篇博客说到命令行执行测试用例的部分参数如何使用?今天将继续更新其他一些命令选项的使用,和pytest收集测试用例的规则! pytest执行用例命令行参数 --collect-only:罗列出所 ... 
- Android JS桥交互("Uncaught ReferenceError: xxx is not defined or xxx has no method")
			网上android和js交互的代码有不少,也很容易搜到.最近在做的项目需要用到js桥,遇到了一些问题,记录下来,希望以后遇到能马上解决掉. 一开始我找的demo是从这个:http://blog.csd ... 
- Cocos Creator—定制H5游戏首页loading界面
			Cocos Creator从1.0版本发布到现在也有一年多了,按理说一些常见的问题网上都有解决方案,例如"如何自定义首页加载进度条界面"这种普遍需求,应该所有人都会遇到的,因此也有 ... 
- 3. [leetcode] Longest Substring Without Repeating Characters
			Given a string, find the length of the longest substring without repeating characters. Examples Give ... 
- 自学python的日记分享
			2019.4.22登记 课堂笔记 2019.4.8 在windows环境下,用python写出第一个程序“hello world” print("Hello World!!!") ... 
- 使用 JWT 生成 Token 代码示例
			JSON Web Token,简称 JWT, 是一个开放的标准(RFC 7519),它定义了以一种紧凑的.自包含的 JSON 对象在各方之间安全传输信息的方式.该信息含有数字签名,可以被验证和信任. ... 
- Fork/Join框架详解
			Fork/Join框架是Java 7提供的一个用于并行执行任务的框架,是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架.Fork/Join框架要完成两件事情: 1.任务分 ... 
- [翻译]Java排错指南 - 5 确定崩溃何地发生
			原文地址: https://docs.oracle.com/javase/8/docs/technotes/guides/troubleshoot/crashes001.html 这几天公司其他组遇到 ... 
- 使用Maven的assembly插件实现自定义打包
			一.背景 最近我们项目越来越多了,然后我就在想如何才能把基础服务的打包方式统一起来,并且可以实现按照我们的要求来生成,通过研究,我们通过使用maven的assembly插件完美的实现了该需求,爽爆了有 ... 
- linq用法整理
			linq用法整理 普通查询 var highScores = from student in students where student.ExamScores[exam] > score se ... 
