iframe父与子之间控制实例_iframe 如何在left 控制right-优快云博客

本文探讨了HTML页面框架的交互与数据传递机制，包括使用JavaScript实现的跨域通信方法，通过实例展示了如何在不同页面间进行数据共享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

main.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
    function fun() {
    	window.frames["left"].document.getElementById("ttt").value ="222222";
	}
</script>
</head>
<body>
<frameset rows="50%,50%" frameborder="yes">
	<Iframe name="left" id="left" src="left.html" scrolling="auto"
		frameborder="100"></iframe>
	<Iframe name="right" id="right" src="right.html" scrolling="auto"
		frameborder="100"></iframe>
</frameset>
<input type="text" id="bbb" />
<input type="button" onclick="fun()" value="请调用" />
</body>
</html>

left.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
<mate name="Generator" content="EditPlus" />
<mate name="Author" content="" />
<mate name="Keywords" content="" />
<mate name="Description" content="" />
<script type="text/javascript">
	function fun() {
		window.parent.document.all('bbb').value = "bbbb";
		var right = window.parent.frames["right"];
		right.document.getElementById("aaa").value = "ccccddd";
		right.aaaaa("left调用right的js");
	}
	function init() {
		alert("main调用left的js");
	}
</script>
</head>
<body onload="init()">
	<table>
		<tr>
			<td></td>
			<td><input type="button" onclick="fun()" value="调用"/> <input type="text"
				id="ttt" /></td>
		</tr>
	</table>
</body>
</html>

right.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
    function aaaaa(aaa) {
		alert("aaa");
	}
</script>
</head>
<body>
	<table>
		<tr>
			<td><input type="text" id="aaa" /></td>
		</tr>
	</table>
</body>
</html>