iframe父窗体和子窗体的相互调用

胖鹅68

于 2013-12-04 10:15:52 发布

阅读量481

点赞数

本文链接：https://blog.csdn.net/hbiao68/article/details/17113807

版权

父窗体

<html>
	<head>
		<title>usually function</title>
	</head>
	<body>
		
		<iframe src="http://www.baidu.com" ></iframe>
		
		<iframe src="myifame.html" id="name_iframe" name="name_iframe"></iframe>
		
		<button value="buttonvalue" id="testid">buttonvalue</button>
	</body>
<html>	
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script>
//contentWindow这个属性，相当于获取iframe网页里面的window对象
$(function(){
	//父窗体获取子窗体的变量
	alert(document.getElementById("name_iframe").contentWindow.vname);//父窗体获取子窗体的方法
	document.getElementById("name_iframe").contentWindow.test();//父窗体获取子窗体的内容
	alert(document.getElementById("name_iframe").contentWindow.document.body.outerHTML);
});

var myname="hb";
function parentFunction(){
	alert("parentFunction");
}
	
</script>

子窗体

<html>
	<head>
		<title>usually function</title>
	</head>
	<body>
		
		<button οnclick="getParentContent()">getParentContent</button>
	</body>
<html>	
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script>

var vname="v_name";	
function test(){
	alert("function test");
}

function getParentContent(){
	//获取父窗体的变量
	alert(window.parent.myname);
	//获取父窗体的方法
	window.parent.parentFunction();
	//获取父窗体的dom节点
	alert(parent.document.getElementById("testid").value);
}
	
</script>