【转】jquery iframe取得元素与自适应高度
今天没事来总结一下iframe在jquery中怎么操作的，下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法，各位朋友可参考。
jquery方法:
在iframe子页面获取父页面元素
代码如下:
$('#objId', parent.document);
在父页面 获取iframe子页面的元素
代码如下:
$("#objid",document.frames('iframename').document)
$(document.getElementById('iframeId').contentWindow.document.body).html()
显示iframe中body元素的内容。
$("#testId", document.frames("iframename").document).html();
根据iframename取得其中ID为"testId"元素。
$(window.frames["iframeName"].document).find("#testId").html()
在父窗口中操作 选中IFRAME中的所有输入框：
$(window.frames["iframeSon"].document).find(":text");
在IFRAME中操作 选中父窗口中的所有输入框：
$(window.parent.document).find(":text");
iframe框架的HTML：
<iframe src="test.html" id="iframeSon" width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>
在父窗口中操作 选中IFRAME中的所有单选钮。
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
在IFRAME中操作 选中父窗口中的所有单选钮。
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
iframe框架的：
<iframe src="test.html" id="iframe1″ width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>
假设有两个页面,在相同域下.
index.html 文件内含有一个iframe:
XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面首页</title>
</head> <body>
<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>
</body>
</html>
iframe.html 内容:
XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>iframe.html</title>
</head> <body>
<div id="test">www.</div>
</body>
</html>
iframe自适应高度：
$("#iPersonalInfo").load(function() {
$(this).height($(this).contents().height());
})
有一点需要注意的，我也在调试的时候才发现的，耽误了不少时间。就是绑定事件必须在iframe加载完毕之前绑定，否则不会执行。
以下是jQuery,load事件的概述
在每一个匹配元素的load事件中绑定一个处理函数。
如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。
iframe代码，注意要写ID
<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
jquery代码１：
//注意：下面的代码是放在test.html调用
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});
jquery代码２：
//注意：下面的代码是放在和iframe同一个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});
【转】jquery iframe取得元素与自适应高度的更多相关文章
- jquery iframe取得元素与自适应高度
总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery方法: 在 ...
- iframe 完全跨域自适应高度
1.跨域访问页面, 需要访问后台的页面,通过后台调转 2.跨域自适应宽高 思路:通过相互嵌套,获取跨域页面的高度,通过src传回到本域,通过parent方法设置主页的iframe的高度 index ...
- 如何通过jQuery获取一个没有定高度的元素---------的自适应高度(offsetHeight的正确使用方法)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- iframe框根据内容自适应高度
1.页面 <iframe name="iframe_userCenter" id="iframe" frameborder=2 width=100% he ...
- jquery如何获取元素的滚动高度
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(documen ...
- jquery iframe高度自适应
$(document).ready(function () { $("#test").load(function () { var thisheight = $(this).con ...
- jquery iframe自适应高度[转]
经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试. 很古老的方法: <iframe src="../In ...
- jQuery实现iframe的自适应高度
假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240& ...
- jquery 清空 iframe 的内容，，iframe自适应高度
$(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...
随机推荐
- 滚动到底部加载更多及下拉刷新listview的使用
最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下 ...
- 《DSP using MATLAB》示例Example4.6
用到的z变换的性质: 继续解题: 上代码: b = [0,0,0, 0.25, -0.5, 0.0625]; a = [1, -1, 0.75, -0.25, 0.0625]; % polynomia ...
- DOM--5 动态修改样式和层叠样式表
W3C DOM2 样式规范 CSSStyleSheet对象 表示所有css样式表,包括外部link和嵌入style的;通过document.styleSheets属性可以获得文档中CSSStyleSh ...
- 程序员必备的代码审查（Code Review）清单【转载】
在我们关于高效代码审查的博文中,我们建议使用一个检查清单.在代码审查中,检查清单是一个非常好的工具——它们保证了审查可以在你的团队中始终如一的进行.它们也是一种保证常见问题能够被发现并被解决的便利方式 ...
- 03 Javascript初识
Javascript语言(★★★★★) Javascript是基于对象和事件驱动的脚本语言,作用在客户端. 特点: * 交互性 * 安全性(不能访问本地的硬盘) ...
- 8、显示程序占用内存多少.txt
方法一: 要加单元 PsAPI procedure TForm1.tmr1Timer(Sender: TObject); begin edt1.Text:= format('memory use: % ...
- R语言常用命令
data() 列出当前已安装包中所有可用的实例数据集 help("name") 查看帮助文档 summary()
- HDU 1576 (乘法逆元)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1576 题目大意:求(A/B)mod 9973.但是给出的A是mod形式n,n=A%9973. 解题思 ...
- JavaScript进阶（二）
什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...
- ZOJ 3703 Happy Programming Contest(DP)
题目链接 输出路径,搞了一个DFS出来,主要是这里,浪费了好长时间. #include <cstdio> #include <string> #include <cstr ...