『壹』 javascript 子頁面調用父頁面中的js方法function test()
window.parent與window.opener的區別 javascript調用主窗口方法
1： window.parent
是iframe頁面調用父頁面對象
舉例:
a.html
Html代碼 <html>
<head><title>父頁面</title></head>
<body>
<form name="form1" id="form1">
<input
type="text" name="username" id="username"/>
</form>
<iframe src="b.html" width=100%></iframe>
</body>
</html>
如果我們需要在b.htm中要對a.htm中的username文本框賦值，就如很多上傳功能，上傳功能頁在Ifrmae中，上傳成功後把上傳後的路徑放入父頁面的文本框中
我們應該在b.html中寫
Html代碼
<script type="text/javascript">
var _parentWin =
window.parent ;
_parentWin.form1.username.value = "xxxx" ;
</script>
實例地址： 實例/a.html
源碼：
1.a.html
Html代碼
<html>
<head>
<title>主頁面</title>
<script>
/** 為測試IFrame子窗口調用父窗口的全局變數而添加的測試變數 */
var parentVairous = "為測試IFrame子窗口調用父窗口的全局變數而添加的測試變數";
function parentInvokeIFrame()
{
var
iframeTest = document.frames["iframeTest"];
//使用document.getElementById("iframeTest");同樣可以
alert(iframeTest.document.body.innerHTML);
alert(iframeTest.iFrameVair);
}
</script>
</head>
<body>
<form name="form1"
id="form1">
<input type="text" name="username"
id="username"/>
<input type = "button" value =
"父窗口調用IFrame子窗口中的內容" onclick = 'parentInvokeIFrame()'/>
</form>
<iframe src="b.html" width = '100%' id =
'iframeTest'></iframe>
</body>
</html>
1.b.html
Html代碼
<html>
<head>
<title></title>
<script
type="text/javascript">
/**
為測試父窗體調用IFrame子窗體的全局函數而添加的子窗口全局函數 */
var iFrameVair =
"測試父窗體調用IFrame子窗體的全局函數";
function
UpdateParent()
{
var _parentWin =
window.parent ;
_parentWin.form1.username.value = "xxxx"
;
}
function
childInvokeParent()
{
var parentVairous =
window.parent.window.parentVairous;
alert(parentVairous);
}
</script>
</head>
<body>
<form name="form1"
id="form1">
<p> </p>
<p
align="center">
<input type = "button"
name = "button"
id =
"button"
value = "更新主頁面的UserName內容"
onclick = "UpdateParent()">
<input type = "button"
name = "button2"
id = "button2"
value
= "測試IFrame子窗口調用父窗口的全局變數"
onclick =
"childInvokeParent();"/>
</p>
<p>
</p>
</form>
</body>
</html>
ps:不能跨域獲取，例如iframe的src是'http://www.xxx.ccc/'就不可以
2： window.opener
是window.open 打開的子頁面調用父頁面對象
實例地址： 實例/a.html
源碼：
2.a.html
Html代碼
<html>
<head>
<title>主頁面</title>
<script type="text/javascript">
/**
為測試IFrame子窗口調用父窗口的全局變數而添加的測試變數 */
var parentVairous =
"為測試IFrame子窗口調用父窗口的全局變數而添加的測試變數";
/**
*
因為不同於IFrame（IFrame有id,window.open()與IFrame的父子窗口的模式不同）,
*
所以當是通過window.open()方法打開一個新窗口使, 必須有一個新窗口的對象
* 當然必須先讓子窗口彈出來,
才能調用子窗口中的變數, 否則拋出異常
*/
var OpenWindow;
function openSubWin()
{
OpenWindow =
window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0,
toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location=no,
status=no');
}
function parentInvokeChild()
{
if(OpenWindow)//當然必須先讓子窗口彈出來, 才能調用子窗口中的變數,
否則拋出異常
{
alert(OpenWindow.iFrameVair);
}
}
</script>
</head>
<body>
<form
name="form1" id="form1">
<input type="text" name="username"
id="username"/>
<input type="button" value="彈出子頁面" onclick =
"openSubWin()">
<input type="button" value="測試調用彈出窗口中的全局變數"
onclick = "parentInvokeChild()">
</form>
</body>
</html>
2.b.html
Html代碼
<html>
<head>
<title>子頁面</title>
<script
type="text/javascript">
/** 為測試父窗體調用IFrame子窗體的全局函數而添加的子窗口全局函數
*/
var iFrameVair = "測試父窗體調用IFrame子窗體的全局函數";
function UpdateParent()
{
var _parentWin =
window.opener;
_parentWin.form1.username.value = "xxxx"
;
}
function childInvokeParent()
{
var parentVairous =
window.opener.window.parentVairous;
alert(parentVairous);
}
</script>
</head>
<body>
<form name="form1"
id="form1">
<p> </p>
<p align="center">
<input type="button"
onclick =
"UpdateParent();"
name="button"
id="button"
value="更新主頁面的UserName內容">
<input type = "button"
name = "button2"
id = "button2"
value =
"測試IFrame子窗口調用父窗口的全局變數"
onclick =
"childInvokeParent();"/>
</p>
<p> </p>
</form>
</body>
經過hanjs的提醒，確實需要注意的是，模態窗口的子窗口是沒有辦法修改父窗口頁面中的任何內容的。
例如修改：OpenWindow =
window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0,
toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location=no,
status=no');
為：OpenWindow =
window.showModalDialog("b.html",'newwindow',"dialogHeight:100px,center:yes,resizable:no,status:no");
在子窗口中當希望修改父窗口中的內容時，會彈出「某某」為空或不是對象的錯誤，而這里的「某某」就是你想修改的父窗口中的內容
『貳』 關於js的問題，父頁面打開子頁面，子頁面添加調用父頁面的function方法
Firefox, Chrome 測試通過，沒問題。
如果在IE中有問題，可能是因為array元素所指向的對版象隨著子頁面關閉，也已權經不存在，所以產生錯誤。
可以在父頁面中復制一下被add的obj，這里用了JSON來復制obj:
vararray=[];
functionaddLine(obj){
array.push(JSON.parse(JSON.stringify(obj)));
//array.push(obj);
}
『叄』 JS 子頁面怎麼調用父頁面的方法。
只要在子頁面中調用parent即可
比如調取父頁面的loads（）
parent.loads()
『肆』 js或jQuery，子頁面怎麼調用父頁面當中的方法
要想父頁面局部更新，你這里有兩種方式，
一種是用iframe方式，彈出一個div層，嵌套iframe，提交後，通知父頁面；
另一種是ajax非同步方式，彈出一個表單層，提交數據後，回調處理。
『伍』 Javascript 子窗口調用父窗口js方法
JS子窗口調用父窗口的方法：
框架（iframe）形式，這時用到是window.parent，window.parent能獲取一個框架的父窗口或父框架。頂層窗口的parent引用的是它本身。可以用這一點特性來判斷這個窗口是否是頂層窗口。詳情如下：
1、1.html代表的是父窗口
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>父頁面</title>
</head>
<body>
<formname="form1"id="form1">
<inputtype="text"name="username"id="username"/>
</form>
<iframesrc="2.html"width="100%">
</body>
</html
2、2.html代表的子窗口
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>子頁面</title>
<scripttype="text/javascript">
functionchangeValue(val){
var_parentWin=window.parent;
_parentWin.form1.username.value=val;
}
</script>
</head>
<body>
<inputtype="file"name="filename"onchange="changeValue(this.value);"/>
</body>
</html>
這時在子窗口（iframe窗口）所做的改變，會改變父窗口中username的值。