首页 > 代码库 > jquery iframe取得元素与自适应高度

jquery iframe取得元素与自适应高度

总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考。

jquery方法:

在iframe子页面获取父页面元素

$(‘#objId‘, parent.document); 

 

在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="http://www.mamicode.com/test.html" id="iframeSon" width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>

1.在父窗口中操作 选中IFRAME中的所有单选钮

 代码如下复制代码

$(window.frames["iframe1"].document).find("input[@type=‘radio‘]").attr("checked","true");

2.在IFRAME中操作 选中父窗口中的所有单选钮

 代码如下复制代码

$(window.parent.document).find("input[@type=‘radio‘]").attr("checked","true");

iframe框架的:

 代码如下复制代码

<iframe src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

jquery代码1:

 代码如下复制代码

//注意:下面的代码是放在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代码2:

 代码如下复制代码

//注意:下面的代码是放在和iframe同一个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});


jqueryiframe取得