2019年4月10日 星期三

(15)window物件 中篇

遠端遙控
遙控視窗就如同電視機的遙控器一般，點選遙控視窗(電視遙控器按鈕)中的項目就可以控制主頁面視窗的內容(電視機頻道畫面)，要建立遠端操控的主從式架構，必須建立兩個視窗：主頁面視窗與遠端遙控視窗。

遠端遙控視窗是由主頁面視窗所建立，也就是說主頁面視窗是「父親」，而遠端遙控視窗則是「兒子」，遠端遙控視窗的建立有兩種時機，一種是在主頁面視窗產生時同時建立，另一種則是當瀏覽者在主頁面視窗點選鏈結時才建立，但是，使用遙控式主從層式架構是在主頁面視窗產生時立即提供遠端遙控視窗， 而不須等待瀏覽者自己點選鏈結才建立，否則就失去使用主從式架構的意義了。
  1. <script language="JavaScript">
  2. //建立遙控視窗的函式
  3. function openchoose()
  4. {
  5. newwindw=window.open("5-8-1.htm","","width=100,height=150")
  6. }
  7. </script>
在上列的函式敘述中代表openchoose()函式被呼叫時，將開啟一個寬100個像素、高150個像素，但是沒有工具列、網址欄位或是狀態列的新瀏覽器視窗，這個新視窗也不能調整大小。



為了在主頁面視窗網頁載入時立即提供遠端遙控視窗，所以我們必須在<BODY>標籤內加入OnLoad事件處理器來呼叫建立遠端遙控視窗的函式：
  1. <!-- 主網頁視窗網頁載入時建立遙控視窗 -->
  2. <BODY OnLoad="openchoose()">
(主頁面視窗)
  1. <HTML>
  2. <HEAD><TITLE>遠端遙控</TITLE></HEAD>
  3. <script language="JavaScript">
  4. //建立遙控視窗的函式
  5. function openchoose()
  6. {
  7. newwindw=window.open("5-8-1.htm","","width=100,height=150")
  8. }
  9. </script>
  10. <!-- 主網頁視窗網頁載入時建立遙控視窗 -->
  11. <BODY OnLoad="openchoose()">
  12. 我是主網頁視窗<br>
  13. 請在遙控視窗中選擇你要參觀的網站
  14. </BODY>
  15. </HTML>
複製代碼
遠端遙控視窗的內容
在遠端遙控視窗的網頁內容中含有實際的「遠端遙控功能」程式碼，在此網頁文件中我們放置著一般的HTML超鏈結，不過在點選這些超鏈結的時候，我們轉向連結的動作並不是發生在遠單遙控視窗內，而是在建立遠端遙控視窗的主頁面視窗中：
  1. <a href="javascript:going('http://www.twbts.com')">
  2. 麻辣學園
  3. </a><br>
  4. <a href="javascript:going('http://dgr.twbts.com')">
  5. 築夢學園 
  6. </a> <br>
  7. <a href="javascript:going('http://office.twbts.com')"> 
  8. office學園 
  9. </a>
這些HTML超鏈結是使用JavaScript虛擬協定來呼叫going()函式，並在呼叫函式時給予超鏈結時轉向時主頁面視窗的連結網址參數。
  1. <script language="JavaScript">
  2. //轉向主頁面視窗連結函式
  3. function going(address)
  4. {
  5. window.opener.location=address
  6. }
  7. </script>
複製代碼
請注意：如果由瀏覽器視窗中另外建立一個新視窗，則此瀏覽器視窗就成為了新視窗的opener(開啟/建立者)，因此，我們在呼叫函式時給予超鏈結時轉向時就必須是：
  1. window.opener.location=”URL”
而不是：
  1. window.location=”URL”
複製代碼
否則，呼叫函式時給予超鏈結時轉向時將會是新視窗本身，而非建立新視窗的瀏覽器視窗！

(遠端遙控視窗)
  1. <HTML>
  2. <HEAD><TITLE>遠端遙控</TITLE></HEAD>
  3. <script language="JavaScript">
  4. //轉向主頁面視窗連結函式
  5. function going(address)
  6. {
  7. window.opener.location=address
  8. }
  9. </script>

  11. <BODY>
  12. <a href="javascript:going('http://www.twbts.com')">
  13. 麻辣學園
  14. </a><br>
  15. <a href="javascript:going('http://dgr.twbts.com')">
  16. 築夢學園 
  17. </a><br> 
  18. <a href="javascript:going('http://office.twbts.com')"> 
  19. office學園 
  20. </a> 
  21. </BODY> 
  22. </HTML>



關閉瀏覽器視窗
我們可以利用JavaScrip中window物件的open()方法建立新瀏覽器視窗，可以建立視窗，相對的就可以關閉視窗，要利用JavaScript來關閉視窗，同樣必須使用window物件的方法，那就是close()方法：
close()方法標準格式
  1. window.close()
不過當我們使用close()方法來關閉瀏覽器時會先出現一個『詢問』對話視窗，需要經過我們再次確認才會關閉視窗：
  1. <HTML>
  2. <HEAD><TITLE>close()方法</TITLE></HEAD>
  3. <script language="JavaScript">
  4. //關閉視窗的函式
  5. function closewindow()
  6. {
  7. window.close()
  8. }
  9. </script>
  10. <BODY>
  11. <form>
  12. <!-- 按下表單按鈕則呼叫關閉視窗的JavaScript函式 -->
  13. <input type="button" value="按下我將會關閉目前視窗" OnClick="closewindow()">
  14. </form>
  15. </BODY>
  16. </HTML>
怎會這樣？還會出現一個『詢問』對話視窗真是令人討厭ㄚ。因為這個瀏覽視窗並不是由JavaScript所建立開啟出來的，因此在我們使用close()方法想要把這個瀏覽視窗關閉就會出現『詢問』對話視窗，如果我們利用JavaScript來建立一個新視窗，在新瀏覽器視窗內，我們同樣使用window()方法關閉視窗時卻不會出現『詢問』對話視窗：

(開新視窗的網頁原始碼)
  1. <HTML>
  2. <HEAD><TITLE>close()方法</TITLE></HEAD>
  3. <BODY>
  4. <script language="JavaScript">
  5. //開新視窗函式
  6. function openNew()
  7. {
  8. newwindw=window.open("5-10-1.htm")
  9. }
  10. </script>
  11. <a href="javascript:openNew()">點選我將開啟新視窗</a>
  12. </BODY>
  13. </HTML>
(關閉視窗的網頁原始碼)
  1. <HTML>
  2. <HEAD><TITLE>close()方法</TITLE></HEAD>
  3. <BODY>
  4. <!-- 按下鏈結則直接呼叫close()方法 -->
  5. <a href="javascript:window.close()">關閉目前視窗</a>
  6. </BODY>
  7. </HTML>

於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)
  • OpenOffice.org 自由學習趣：Part2Calc4_圖表
    版權宣告 【數位書香網站】之所有著作、視聽內容及資料以及網站畫面資料之安排，其著作權、專利權、商標、營業秘密及其他智慧財產權，均為【昱得資訊工作室】之合法權利人所有，除事先經【昱得資訊工作室】或其權利人之合法授權，任何人皆不得擅...
  • (17)網頁物件 上篇
    網頁物件：document，document物件我們之前已經用過了喔！還記得我們要將資料輸出到網頁上時，使用了write()方法，這個write()方法就是屬於document物件的！ 其實，document物件是指：顯示於瀏覽器視窗中的網頁文件，舉凡與網頁相關的設定項目，都是...
  • DW_PHP_AJAX_CH2 PHP語言入門_(2)變數、符號與陣列_陣列
    [陣列]   什麼叫陣列（Array）？陣列就是一個集合變數, 陣列就如變數一般, 可用來儲存資料, 一般的變數只能存放一筆資料, 而陣列則可以存放多筆資料, 簡言之, 陣列就一群資料型態相同的變數集合。 陣列是一群變數的集合, 不妨將陣列想像成一間旅館, 旅館內會有很多房...
  • DW_PHP_AJAX_CH3 表單的設計與規劃_(4)使用Spry元件驗證欄位_下
    [驗證Email格式] 希望使用者留下聯絡的電子信箱, 卻擔心使用者填寫了錯誤格式的郵件地址, 別擔心, 「Spry驗證文字欄位」也具由電子信箱、身分證字號…等具有特定格式的資料驗證功能。 1. 點選「信箱」文字欄位, 然後按下工具列【Spry】頁籤中的「Spry驗證文...
  • 版權宣告
    【數位書香網站】之所有著作、視聽內容及資料以及網站畫面資料之安排，其著作權、專利權、商標、營業秘密及其他智慧財產權，均為【昱得資訊工作室】之合法權利人所有，除事先經【昱得資訊工作室】或其權利人之合法授權，任何人皆不得擅自以任何形式複製、改作、編輯、散布、傳輸或其他目的加以使用，否...
  • (02)JavaScript算術運算與變數
    算數運算 在我們JavaScript中的算數運算可分為下列5種。 運算元        說明 +        加法，例如document.write(2+3)，網頁輸出答案5 -        減法，例如：document.write(3-2)，網頁輸出答案1 * ...
  • PowerPoint快速鍵
    若要這麼做 請按 從頭開始簡報 F5 從目前的投影片開始簡報 Shift+F5 顯示 簡報者檢視畫面 Alt+F5 或 Alt+S，B 在簡報中，以查看快速鍵的清單，請按下 F1。使用方向鍵在  說明投影片放映  對話方...