1. 程式人生 > >jquery操作iframe的方法:父頁面和子頁面相互操作的方法

jquery操作iframe的方法:父頁面和子頁面相互操作的方法

今天在弄jquery操作iframe中元素:先由iframe中的子頁面b.html給外面的父頁面a.html頁面傳值,再將a.html頁面計算機的值放到b.html頁面上,這裡就用到子頁面和父頁面相互傳值,相互呼叫更自函式這些功能,這裡我用一個簡單的例子來介紹一下這些方法。

a.html

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function f()
{
	$('#a').contents().find("#bbb").val("ddd"); 
}
function fun()
{
	alert('彈出子頁面呼叫的函式');
}
</script>
<div id="maindiv">test</div>
<iframe id="a" name="a" src="b.html" width="600" height="400"></iframe><br />
<input type="button" value="給子頁面表單賦值" onclick="f()" />

b.html

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function f()
{
	alert('開始呼叫父頁面函式');	
	$(window.parent.fun());
	$(window.parent.$("#maindiv").html("子頁面賦過來的值"));
}
</script>
<form name="cform"><input type="text" name="b" id="bbb" /><input name="btn" type="button" onclick="f()" value="呼叫父函式並給父頁面元素賦值" /></form>