首頁 > 開發者 > JavaScript

window.parent與window.openner區別介紹

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天總結一下js中幾個對象的區別和用法：
首先來說說 parent.window與top.window的用法
"window.location.href"、"location.href"是本頁面跳轉
"parent.location.href"是上一層頁面跳轉
"top.location.href"是最外層的頁面跳轉
舉例說明：
如果A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的iframe，如果D中js這樣寫
"window.location.href"、"location.href"：D頁面跳轉
"parent.location.href"：C頁面跳轉
"top.location.href"：A頁面跳轉
現在終於明白了串連的時候target的用法了：
_blank：重新開啟一個視窗
_parent：父視窗執行重新導向
_self：自身頁面重新導向
_top:第一個父視窗重新導向
綜上所述可知：parent.window:父視窗對象 top.window:第一個父視窗的對象
下面來重點看看window.parent與window.openner區別
window.parent 是iframe頁面調用父頁面對象，當我們想從iframe內嵌的頁面中訪問外層頁面是可以直接利用window.parent擷取；
例子如下：
A.html
複製代碼 代碼如下:
<html>
<head>
<title>父頁面</title>
</head>
<body>
<form id="form1" action="">
<div>
輸入值：
<input type="text" name="username" id="username" /><br />
<iframe src="b.html" width="400px" height="300px"></iframe>
</div>
</form>
</body>
</html>

B.html
複製代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function getpValue()
{
document.getElementByIdx_x_x_x("span1").innerText=window.parent.document.getElementByIdx_x_x_x("username").value;
}
</script>
</head>
<body>
<span>文字框值為：</span><span id="span1"></span><br />
<input type="button" value="擷取父視窗內的文字框值" onclick="getpValue();">
</body>
</html>

window.opener 是window.open或超連結<a> 開啟的子頁面調用父頁面對象
例子如下
a.html
複製代碼 代碼如下:
<html>
<head>
<title>父頁面</title>
<script type="text/javascript">
function openB()
{
window.open('b.html','b','width=400,height=200,status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=200,top=100');
}
</script>
</head>
<body>
<form id="form1" action="">
<div>
輸入值：
<input type="text" name="username" id="username" /><br />
<input type="button" value="開啟視窗B" onclick="openB();" /><br />
<a href="b.html" target="_blank">超連結開啟B頁面</a>
</div>
</form>
</body>
</html>

b.html
複製代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function getpValue()
{
document.getElementByIdx_x_x_x("span1").innerText=window.opener.document.getElementByIdx_x_x_x("username").value;
}
</script>
</head>
<body>
<span>文字框值為：</span><span id="span1"></span><br />
<input type="button" value="擷取父視窗內的文字框值" onclick="getpValue();">
</body>
</html>

下面來舉幾個常用的例子：
parent.window與top.window一般在分割的頁面即 frameset或iframe中使用
登出整個架構後返回到login.aspx：parent.window.location='Login.aspx'或者
top.window.location='Login.aspx'
window.parent也是常在架構中使用，
重新整理：window.parent.location.reload();或者重新整理某個架構：window.parent.MainForm.location.reload();
獲得其他架構的元素值：window.parent.MainForm.form1.text1.value;
window.opener主要是獲得通過超連結或者 window.open() 開啟本身頁面的頁面的一些，比如獲得值，重新整理等
重新整理：window.opener.location.reload();
獲值：window.opener.document.getElement("txtName").value;
後退：top.playFrame.history.go(-1);
前進： top.playFrame.history.go(1);
重新整理： top.playFrame.location.reload();
就總結到這裡，這些對象很實用

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More