iframe-父子-兄弟页面相互传值(jq和js两种方法)

参考文章：

http://blog.csdn.net/u013299635/article/details/78773207

http://www.cnblogs.com/xyicheng/archive/2010/02/26/1674017.html

父窗口代码

<body>
<iframe id="frame" name="frame" src="frame.htm" frameborder="0"></iframe>
<iframe id="newFrame" name="newFrame" src="newFrame.htm" frameborder="0"></iframe>
</body>

1. 父窗口调用子窗口中的方法test方法

// js
document.getElementById("frame").contentWindow.test();
// jq
$("#frame")[0].contentWindow.test(); //用jquery调用需要加一个[0]

2. 父窗口获取子窗口的值

$("#frame")[0].contentWindow.$("#dd").val()；或者 frame.window.$("#dd").val();

var t = document.getElementById('frame').contentWindow.document.getElementById('dd');

$(window.frames["iframe1"].document).find("#id").val();

3. 子窗口调用父窗口的方法

parent.ggMM();

4 兄弟窗口方法调用

iframe调用newFrame中的frameFn方法

// js
parent.parent.document.getElementById('newFrame').contentWindow.frameFn();
// jq
parent.$("#newFrame")[0].contentWindow.frameFn();

5.兄弟窗口传值

iframe给newFrame传值

parent.$("#newFrame")[0].contentWindow.$('#nn2').val();

$("#newFrame",parent.document.body).contents().find("someID").val();

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

使用jquery操作iframe

1、内容里有两个ifame

leftiframe中jQuery改变mainiframe的src代码：
$("#mainframe",parent.document.body).attr("src","http://www.radys.cn")

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()值

3、在父窗口中操作选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

那选择id自然就是依然使用find方法
$(window.frames["iframe1"].document).find("#id")

4、如上面所示
leftiframe中的jQuery操作mainiframe的内容someID的内容
$("#mainframe",parent.document.body).contents().find("someID").html()或者 $("#mainframe",parent.document.body).contents().find("someID").val()

使用JavaScript操纵iframe

框架间的互相引用

一个页面中的所有框架以集合的形式作为window对象的属性提供，例如：window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是document的属性。因此，要引用一个子框架，可以使用如下语法：

window.frames["frameName"];

window.frames.frameName

window.frames[index]

其中，window字样也可以用self代替或省略，假设frameName为页面中第一个框架，则以下的写法是等价的：

self.frames["frameName"]

self.frames[0]

frames[0]

frameName

每个框架都对应一个HTML页面，所以这个框架也是一个独立的浏览器窗口，它具有窗口的所有性质，所谓对框架的引用也就是对window对象的引用。有了这个window对象，就可以很方便地对其中的页面进行操作，例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。

下面分别介绍不同层次框架间的互相引用：

1．父框架到子框架的引用

知道了上述原理，从父框架引用子框架变的非常容易，即：

window.frames["frameName"];

这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现：

window.frames["frameName"].frames["frameName2"];

这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。

2．子框架到父框架的引用

每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。

3．兄弟框架间的引用

如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用，例如一个页面包括2个子框架：

</frameset>

在frame1中可以使用如下语句来引用frame2：

self.parent.frames["frame2"];

4．不同层次框架间的互相引用

框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：

self.parent.frames["childName"].frames["targetFrameName"];

5．对顶层框架的引用

和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：

//判断本框架是否为顶层框架

if(self==top){

//dosomething

}

1.父级html源码：

main.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>main</title>
<style type="text/css">
iframe{float:left;width:48%;height:500px;margin-left:1%;border:1px solid #eee;background:#ddd;display:table-cell;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var gg="这是main.html变量";
function ggMM() {
console.log(gg);
}
function callIframeMethod() {
// js
document.getElementById("frame").contentWindow.test();
// jq
$("#frame")[0].contentWindow.test(); //用jquery调用需要加一个[0]
}
function callIframeField() {
// 以下两种方法可以达到同样的效果
console.log($("#frame")[0].contentWindow.ff);
console.log(frame.window.ff);
}
function callIframeHtml() {
// 以下两种方法可以达到同样的效果
console.log($("#frame")[0].contentWindow.$("#dd").val());
console.log(frame.window.$("#dd").val());
var t = document.getElementById('frame').contentWindow.document.getElementById('dd');
console.log(t);
// var t = document.getElementById('frame').contentWindow.document.getElementById('dd');
//console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);
//console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);
}
function giveParameter() {
$("#frame")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";
}
</script>
</head>
<body>
<a href="#" onClick="giveParameter();">参数传递</a>
<a href="#" onClick="callIframeMethod();">调用子iframe方法</a>
<a href="#" onClick="callIframeField();">调用子iframe变量</a>
<a href="#" onClick="callIframeHtml();">调用子iframe组件</a></br>
<iframe id="frame" name="frame" src="frame.htm" frameborder="0"></iframe>
<iframe id="newFrame" name="newFrame" src="newFrame.htm" frameborder="0"></iframe>
</body>
</html>

2.子页面

frame.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>frame</title>
<style type="text/css">
a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var ff="adfdasfdsafdsafdsaf";
function test() {
console.log($("#dd").val());
}
function callMainField() {
console.log(parent.gg);
}
function callMainMethod() {
parent.ggMM();
}
function callMainHtml() {
console.log(parent.$("#frame").attr("id"));
}
function getParameter() {
console.log(window.hellobaby);
}
function ss(){
console.log('这是frame方法');
console.log(ff)
}
</script>
</head>
<body>
<h1>frame</h1>
<a href="#" onClick="getParameter();">接受参数</a>
<a href="#" onClick="callMainMethod();">调用父级方法，并且打印父级变量</a>
<a href="#" onClick="callMainField();">调用主窗口变量</a>
<a href="#" onClick="callMainHtml();">调用子iframe组件</a>
<input id="dd" type="text" value="1111111111"/>
</body>
</html>

3.子页面中嵌套的页面

newFranme.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在frame里嵌套frame</title>
<style type="text/css">
input,a{display: block;line-height:30px;}
iframe{
float:left;
width:48%;height:250px;margin-top:40px;background:#abc;border:1px solid blue;
}
#newFrame2{ float:right; }
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var newFrame = {
name:'这是newFrame的变量值',
};
function callLevelFrame() {
var ff=parent.$("#frame")[0].contentWindow.ff;
parent.$("#frame")[0].contentWindow.ss();
console.log('parent.$("#frame")[0].contentWindow.ff: '+ff);
}
function callLevelFrame1() {
console.log($("#newFrame1")[0].contentWindow.iframe1);
}
function frameFn(){
console.log('这是frame里面的方法franmeFn');
}
$(function(){
// setTimeout(function(){
// // console.log(parent.$("#frame"))
// // console.log(parent.$("#frame")[0].contentWindow.ss())
// // console.log(parent.document.getElementById('frame').contentWindow.ss());
// },500)
})
</script>
</head>
<body>
<h1>newFrame</h1>
<a href="#" onClick="callLevelFrame();">调用兄弟iframe</a>
<a href="#" onClick="callLevelFrame1();">调用自己的子页面iframe1变量</a>
<input id="nn" type="text" value="sdafsdfsa"/>
<iframe id="newFrame1" name="newFrame1" src="newFrame1.htm" frameborder="0"></iframe>
<iframe id="newFrame2" name="newFrame2" src="newFrame2.htm" frameborder="0"></iframe>
</body>
</html>

4.子页面的子页面中嵌套的页面

newFram1.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>newFrame1</title>
<style type="text/css">
a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var iframe1 = '我是iframe1的变量';
function callnewFramFn() {
// js
parent.parent.document.getElementById('newFrame').contentWindow.frameFn();
// jq
parent.parent.$("#newFrame")[0].contentWindow.frameFn();
}
function callnewFramParam(){
console.log(parent.parent.document.getElementById('newFrame').contentWindow.newFrame);
}
// $(function(){
// setTimeout(function(){
// // console.log(parent.parent.$("#newFrame")[0])
// // console.log(parent.$("#newFrame")[0].contentWindow.ss())
// // console.log(parent.document.getElementById('newFrame').contentWindow.ss());
// },500)
// })
function frame1(){
console.log(iframe1);
parent.$("#newFrame2")[0].contentWindow.$('#nn2').val(iframe1);
}
</script>
</head>
<body>
<h1>newFrame1</h1>
<a href="#" onClick="callnewFramFn();">调用newFram方法</a>
<a href="#" onClick="callnewFramParam();">调用newFram变量</a>
<input id="nn" type="text" value="这是newFrame1的input值"/>
</body>
</html>

5.子页面的子页面中嵌套的页面

newFram2.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>newFrame1</title>
<style type="text/css">
a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var iframe1 = '我是iframe2的变量';
function callnewFramFn1() {
parent.$("#newFrame1")[0].contentWindow.frame1();
console.log(parent.$('#newFrame1'));
}
</script>
</head>
<body>
<h1>newFrame2</h1>
<a href="#" onClick="callnewFramFn1();">调用newFram1方法</a>
<input id="nn2" type="text" value="这是newFrame1的input值"/>
</body>
</html>

秒客网

iframe-父子-兄弟页面相互传值(jq和js两种方法)

相关文章