test.html

jquery得到同源iframe内body下标签的值的不二秘技,jqueryiframe

test.html

Html代码

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery</title> 
<style type="text/css"> 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function (){ 
$("#show").click(function (){ 
var iframeObj = $(window.frames["iframe_name"].document); 
alert(iframeObj.find("#un").val()); 

}); 

}); 
</script> 
</head> 
<body> 
<input type="button" id="show" value="show" /> 
<iframe id="iframe_id" name="iframe_name" src="http://localhost/test/login.html"></iframe> 
</body> 
</html>

login.html

Html代码

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>登录页面</title> 
</head> 
<body> 
<form method="POST" action="#"> 
用户名:<input id="un" type="text" name="username" value="123d" /> 
密 码:<input type="text" name="password"/> 
<input type="submit" value="提交"> 
</form> 
</body> 
</html>

留心:必得同源

jquery操作 iframe的方法,jquery操作iframe

咱俩先看一下 JQUERAV4Y中的对像 contents() 的援助文件

contents()
概述
搜求相称成分内部装有的子节点(包含文件节点)。要是成分是一个iframe,则查找文档内容

示例
描述:
找寻全部文件节点并加粗

HTML

复制代码 代码如下:

<p>Hello <a href=”;, how
are
you doing?</p>

jQuery

复制代码 代码如下:

$(“p”).contents().not(“[nodeType=1]”).wrap(“<b/>”);结果:
<p><b>Hello</b>
<a href=”;, <b>how are you
doing?</b></p>

描述:
往三个空框架中加些内容

HTML

获取body标签的两种方法,jquery获得同源iframe内body下标签的值的方法。复制代码 代码如下:

<iframe
src=”/index-blank.html” width=”300″ height=”100″></iframe>

jQuery

复制代码 代码如下:

$(“iframe”).contents().find(“body”)
.append(“I’m in an iframe!”);

 

去掉iframe 的边界 frameborder=”0″

1 内容里有八个ifame

复制代码 代码如下:

<iframe id=”leftiframe”…</iframe>
<iframe id=”mainiframe..</iframe>

leftiframe中jQuery改变mainiframe的src代码:

复制代码 代码如下:

$(“#mainframe”,parent.document.body).attr(“src”,””)

2 假如剧情之中有四个ID为mainiframe的ifame

复制代码 代码如下:

<iframe id=”mainifame”…></ifame>

ifame富含三个someID

复制代码 代码如下:

<div id=”someID”>you want to get this content</div>

得到someID的内容

复制代码 代码如下:

$(“#mainiframe”).contents().find(“someID”).html()html 或者
$(“#mainiframe”).contains().find(“someID”).text()值

2 如上边所示
leftiframe中的jQuery操作mainiframe的内容someID的内容

$(“#mainframe”,parent.document.body).contents().find(“someID”).html()或者
$(“#mainframe”,parent.document.body).contents().find(“someID”).val()

Jquery获取到 iframe 所属的父窗口的内部的id为xuan的 标签的

$(window.parent.document).find(“#xuan”).html(x);//

//js创设 成分 并扩充到 父成分的 Iframe中的 成分中的dom操作难点:

iframe中央直属机关接调用父窗口中的章程:借使父窗口有个add的措施

self.parent.add();

===============================================================

IE和Firefox对iframe document对象的差距性

在IE6、IE7中,大家得以行使document.frames[ID].document来做客iframe子窗口中的document对象,然而那是不吻合W3C标准的写法,也是IE下独有的艺术,在Firefox下却无法运用,Firefox下利用的是顺应W3C标准的document.getElementById(ID).contentDocument方法,前日本身在写实例的时候,通过IE8实行测验,IE8也是应用的符合W3C规范的
document.getElementById(ID).contentDocument
方法。所以大家能够写一个在IE和Firefox下通用的拿走iframe
document对象的函数—getIFrameDOM:

复制代码 代码如下:

functiongetIFrameDOM(id){returndocument.getElementById(id).contentDocument||document.frames[id].document;}

P.S.:假诺大家要获取iframe的window对象,实际不是document对象,能够选择document.getElementById(ID).contentWindow的章程。那样大家就可以使用子窗口中的window对象了,比如子窗口中的函数。

在子窗口使用父窗口的函数,获取父窗口document对象

在子窗口中,大家能够透过parent就能够得到父窗口的window对象,借使只要大家在父窗口有三个函数为getIFrameDOM,大家得以经过parent.getIFrameDOM来调用,同理大家选取parent.document就能够在子窗口中访谈父窗口的document对象了。

应用JavaScript进行iframe的DOM操作实例

率先,大家在父窗口中引入多少个iframe子窗口,ID分别为wIframeA、wIframeB,地址分别为:a.html、b.html。
父窗口首要HTML代码如下:

复制代码 代码如下:

<div id=”pHello” style=”margin:10px
auto;width:360px;height:30px;”>此处可由此iframeB的JavaScript函数,来替换哦~</div>
<iframe id=”wIframeA” name=”myiframeA” src=”a.html” scrolling=”no”
frameborder=”0″></iframe> <iframe id=”wIframeB”
name=”myiframeB”
src=”b.html” scrolling=”no” frameborder=”0″></iframe>

 
在子窗口A、B中自己放了一个ID为hello的P,以方便大家进行DOM操作演示,子窗口A、B的机要HTML代码如下:

复制代码 代码如下:

<p id=”hello”>Hello World!</p>

1、在iframe中,父窗口操作子窗口的DOM

建好了父窗口跟子窗口,那样我们能够在父窗口中,通过以下iframeA()函数来把子窗口A改变P的背景颜色为革命:

复制代码 代码如下:

functioniframeA(){//给子窗口A改变ID为hello的背景象
vara=getIFrameDOM(“wIframeA”);
a.getElementById(‘hello’).style.background=”red”;
}
functiongetIFrameDOM(id){//包容IE、Firefox的iframeDOM获取函数
returndocument.getElementById(id).contentDocument||document.frames[id].document;
}

2、在iframe中,子窗口操作父窗口的DOM

在子窗口中,大家得以一本万利的实行父窗口DOM操作,只供给在DOM操作在此之前拉长亦歌parent对象的章程就能够啊,如:在上头的子窗口B中,大家得以选取下边包车型大巴代码把,父窗口中ID为“pHello”的内容给替换掉:


3、在iframe中,子窗口A操作子窗口B的DOM

既然子窗口能够操作父窗口的window对象和document对象,那么子窗口也足以操作另外的子窗口的DOM啦~断桥残雪在子窗口B中得以一贯利用parent直接调用父窗口中的getIFrameDOM函数拿到子窗口A的document对象,那样要修改子窗口A的内容就很轻巧啦,如以下的代码:

复制代码 代码如下:

vara=parent.getIFrameDOM(“wIframeA”);

===================================================================================

叁个iframe中度自动生成的难点搞了作者半天,英特网找了下资料,不是很好,结合了一晃jquery(版本1.3.2),4行代码就能够,完美兼容IE、Firefox、Opera、Safari、谷歌
Chrome,js如下:

复制代码 代码如下:

function  heightSet(thisFrame){
if($.browser.mozilla || $.browser.msie){
          bodyHeight
=window.frames[“thisFrameName”].document.body.scrollHeight;
}else{
          bodyHeight
=thisFrame.contentWindow.document.documentElement.scrollHeight;
//那行可替代上一行,那样heightSet函数的参数能够省略了
          //bodyHeight =
document.getElementById(“thisFrameId”).contentWindow.document.documentElement.scrollHeight;
}
       document.getElementById(“thisFrameId”).height=bodyHeight; 
}
<iframe id=”mainFrame” name=”mainFrame” frameborder=”0″ 
scrolling=”no” src=””onload=”heightSet(this)”></iframe>

引用

this关键字在各类浏览器就好像有不相同的情致,FF和IE必供给经过iframe的名字去赢得内部页面中度,而其他浏览器则足以用this或ID

引用

都在说一个异步的难题,如若您ajax用得特别多,但又不想每便都去设置,那动态改换iframe断定达不到您的代码清洁要求,不可能,要么你就退出iframe。笔者只可以说说一般管理情势,究竟ajax或动态表单在一般选用中只占小数比例,异步央求后只需在后边加上:

Js代码

复制代码 代码如下:

parent.window.heightSet();

iframe的法子,jquery操作iframe
大家先看一下 JQUEWranglerY中的对像 contents() 的扶助文件 contents() 概述
查找相称成分内部有着的子节点(包含…

援用body标签有两做法:

Html代码

Jquery怎获取iframe里面body的html?

设借使和睦网页的话,可以这么,$(“iframe”).contents().find(“body”).html();
意思是,获取iframe里面页面body的内容
同理,$(“iframe”).contents().find(“body”).height();获取中度,由此及彼
但愿可以帮到你,不懂能够问小编
 

率先种:使用DOM Core
即援引有些给定文书档案的率先个(也是仅局地三个)body标签

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery</title> 
<style type="text/css"> 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function (){ 
$("#show").click(function (){ 
var iframeObj = $(window.frames["iframe_name"].document); 
alert(iframeObj.find("#un").val()); 

}); 

}); 
</script> 
</head> 
<body> 
<input type="button" id="show" value="show" /> 
<iframe id="iframe_id" name="iframe_name" src="http://localhost/test/login.html"></iframe> 
</body> 
</html>

怎用jquery获取iframe中的内容

框架代码怎会写到body里头去了,应该放权body外面,将body标签放到noframes标签里面,然后写上
$(window.frames[‘header’].document.body).html()
 

test.html Html代码 !DOCTYPE HTML html head meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8…

复制代码 代码如下:

网站地图xml地图