各个iframe内获取值，互相调用方法测试

来源：互联网发布：泰国q10牛奶洗面奶知乎编辑：程序博客网时间：2024/06/07 09:50

left.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
body,html
{
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#left1
{
border:1px solid green;
height:100%;
}
</style>
</head>
<body onload="left_load();">
<div id="left1">
<input type="text" id="left" value="left" style="width:150px;height:15px;"/>
</div>
<script type="text/javascript">
function left_load()
{
var main=parent.window.document.getElementById("main").value;
alert("left----"+main);

parent.window.main_a();
}
function left_a()
{
alert("left_a");
}
</script>
</body>
</html>
======================================================
main.html
<!DOCTYPE html>
<html>
<head>
<title>test iframe</title>
<script type="text/javascript">
</script>
<style type="text/css">
body,html
{
height:100%;
margin:0px;
padding:0px;
}
#main1
{
height:100%;
}
</style>
</head>
<body onload="load();">
<div id="main1" >
<div id="head" style="height:120px;border:1px solid blue;">
<input type="text" id="main" value="main" style="width:150px;height:15px;"/>
</div>
<iframe id="left_f" name="left_f" src="left.html" width="20%" height="80%" frameBorder="0" /></iframe>
<iframe id="right_f" name="right_f" src="right.html" width="79%" height="80%" frameBorder="0" /></iframe>
</div>
<script type="text/javascript">
function load()
{
var left=window.frames["left_f"].document.getElementById("left").value;
var right=window.frames["right_f"].document.getElementById("right").value;
alert(left+"||||"+right);

window.frames["right_f"].right_a();
}
function main_a()
{
alert("main_a");
}

</script>
</body>
</html>
===================================================================
right.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
body,html
{
height:100%;
margin:0px;
padding:0px;
}
#right1
{
border:1px solid red;
height:1200px;
}
</style>
</head>
<body onload="right_load();">
<div id="right1">
<input type="text" id="right" value="right" style="width:150px;height:15px;"/>
</div>
<script type="text/javascript">
function right_load()
{
//right iframe 获取left iframe中变量的值
//方法1：先获取left iframe元素，在获取值
var frames=parent.document.getElementById("left_f");//parent就是父窗口window对象，
var left=frames.contentDocument.getElementById("left").value;//frames就是iframe对象的实例，contentDocument相当于document对象
//方法2：获取父窗口的frames集合，该集合里存储的是各个iframe对应的window对象，拿到此对象就能获取iframe内定义的值、调用iframe内定义的函数了
var left=parent.window.frames["left_f"].document.getElementById("left").value;
alert("right----"+left);
//frames.contentWindow.left_a();
parent.window.frames["left_f"].left_a();
}
function right_a()
{
alert("right_a");
}
</script>
</body>
</html>
------------------------------------------------------------------------------
各个iframe内获取值，互相调用方法测试
父窗口获取子iframe内的变量值、调用函数：
通过window.frames["iframe_id"]获取到子iframe对应的window对象，然后再获取值，调用函数。如：
var left=window.frames["left_f"].document.getElementById("left").value;
window.frames["right_f"].right_a();

子窗口获取父窗口的变量值，调用函数：
通过parent.window获取到父窗口的window对象。如：
var main=parent.window.document.getElementById("main").value;
parent.window.main_a();

子窗口获取兄弟窗口的变量值，调用函数：
先获取父窗口的window对象，通过父窗口的farmes[]集合获取兄弟窗口对应的window对象。如：
var left=parent.window.frames["left_f"].document.getElementById("left").value;
parent.window.frames["left_f"].left_a();

0 0