【转】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& ...
随机推荐
- c#写windows服务（转）
序言 前段时间做一个数据迁移项目,刚开始用B/S架构做的项目,但B/S要寄存在IIs中,而IIs又不稳定因素,如果重启IIs就要打开页面才能运行项目.有不便之处,就改用Windows服务实现.这篇就总 ...
- DSP using MATLAB 示例Example2.4
n = [0:10]; x = stepseq(0,0,10) - stepseq(10,0,10); [xe,xo,m] = evenodd(x,n); set(gcf,'Color',[1,1,1 ...
- css整理－03 文本
缩进和水平对齐 缩进文本:text-indent 可以设置为负值 可以为所有块级元素应用,但无法应用到行内元素,图像之类的替换元素: 水平对齐: text-align left,center,righ ...
- css3 总结02
盒子尺寸 .border-box{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-sizing: border ...
- js兼容方法：事件添加|事件绑定|事件监听 addEvent
function addEvent(obj,sEvent,fn){ if(obj.attachEvent){ obj.attachEvent("on"+sEvent,fn); }e ...
- 运用datalist标签实现用户的搜索列表
datalist是一个很强大的HTML5标签,支持一般类似于模糊查询,以前都是需要js来做的.下面是一个datalist配合js的小例子,主要是实现用户是否存在,以及添加过程中是否重复的判断. 首先是 ...
- 连连看[HDU1175]
连连看 Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- 偶然的发现(与Code无关)
最近做后台用户注册, 在考虑不使用验证码, 百度搜了一下看了看一些相关技术, 发现了个小说——[万恶的验证码], 看了挺搞笑分享一下:原文链接 万恶的验证码 前言: 传说中,它是最为邪恶的吸血鬼,它是 ...
- [WP8.1UI控件编程]Windows Phone XAML页面的编译
1.1.2 XAML页面的编译 Windows Phone的应用程序项目会通过Visual Studio完成XAML页面的编译,在程序运行时会通过直接链接操作加载和解析XAML,将XAML和过程式代码 ...
- 如何在电脑上测试手机网站（补充）和phonegap
颜海镜 介绍了专业人士精准测试手机网站的经验 http://www.cnblogs.com/yanhaijing/p/3557261.html, 因为太专业了,稍显复杂和琐碎,这里我介绍下我一直关注的 ...