JavaScript視窗功能指南之引用已開啟的視窗

最後更新：2018-12-05 來源：互聯網

上載者：User

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

如果你想關聯一個指定的視窗，你可以使用< A >標記的TARGET屬性。除非你分配，一個瀏覽器視窗不會有一個名字。當你使用TARGET屬性通過一個連結開啟一個新視窗時，你就分配給它了一個清晰的名字：

　　<A HREF="http://www.intel.com/" TARGET="review">Intel</A>

　　前面的連結開啟一個新視窗，名叫review。下面的連結通過JavaScript產生同樣的效果：

　　<A HREF="http://www.intel.com/"

　　 onClick="window.open('http://www.intel.com/', 'review'); return false">Intel</A>

　　如你所見，給一個新視窗分配一個名字是非常簡單的事情。但是，給一個存在的視窗命名，或者給一個使用者產生的視窗命名，又會怎樣呢？

　　window對象的name屬性可以讓你通過JavaScript設定任何視窗的名字。如果你想建立一個新視窗，它可以關聯父視窗的連結和表單，就一定要分配給開啟者一個名字：

　　window.name = "main";

　　var map = window.open("newpage.html", "map");

　　如果在newpage.html中包含了下面的連結，就會在父視窗中裝載下面的頁面：

　　<A HREF="http://www.docjs.com/" TARGET="main">Doc JavaScript</A>

開啟者的屬性
　　opener屬性設定或者取回建立當前視窗的那個視窗的引用。當調用open（）方法在目標視窗開啟一個來源文件時，opener屬性（隸屬於目標視窗的window對象）就定義了來源文件所在的視窗。這個屬性在開啟的視窗中一直存在，所以即使新視窗中的URL改變時，它仍舊可以訪問。

　　opener屬性是父視窗window對象的引用，所以你就可以充分利用這個屬性，通過指令碼程式，在新視窗中執行對開啟視窗的任何操作。比如，在目的文件中使用下面的指令碼程式去修改開啟視窗的背景色彩：

　　window.opener.document.bgColor = "beige";

　　呵呵，如果你目光敏銳，你也許注意到上面這個語句的錯誤。我們必須檢查是否開啟視窗仍然存在，然後才能決定去修改它的相關屬性。下面是正確的代碼：

　　if (window.opener && !window.opener.closed)

　　 window.opener.document.bgColor = "beige";

　　opener屬性非常有用，因為它建立了開啟視窗與被開啟視窗之間的雙向聯絡。

　　讓我們給出個實際的例子，看看它是如果工作的，下面是出現在首頁面上表單的HTML代碼：

　　<FORM NAME="stockForm">Enter your favorite tech stock:

　　</FORM>

　　注意，表單的名字是stockForm，文本域的名字是stockBox，“list”按鈕啟用showList（）函數。同時，在文檔的

　　< Body >標記中設定onUnload事件處理常式，它將執行remLink（）函數。下面是這2個函數的代碼：

<!--

　　function showList() {

　　 sList = window.open("stocklist.html", "list", "width=150,height=210");

　　}

　　function remLink() {

　　 if (window.sList && window.sList.open && !window.sList.closed)

　　　　window.sList.opener = null;

　　}

　　// -->

　　</SCRIPT>

　　當前文檔被卸載時，remLink（）函數設定子視窗的opener屬性為null。新視窗中的指令碼程式在分配文本域數值前檢查opener屬性。我們必須使用這個函數，因為如果一個不同文檔在新視窗中被裝載，這個視窗的指令碼程式就不能訪問文字框。

　　下面是stocklist.html的代碼：

　　<HTML>

　　<HEAD>

　　<TITLE>Stock List</TITLE>

<!--

　　function pick(symbol) {

　　 if (window.opener && !window.opener.closed)

　　　　window.opener.document.stockForm.stockBox.value = symbol;

　　 window.close();

　　}

　　// -->

　　</SCRIPT>

　　</HEAD>

　　<BODY>

　　<TR BGCOLOR="#cccccc"><TD><B>NYSE</B></TD><TD><B>NASDAQ</B></TD></TR>

　　</TABLE>

　　</BODY>

　　</HTML>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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