2019年4月1日 星期一

(14)window物件 上篇

當你要改變目前的瀏覽位置(非點選網頁中的超鏈結)你會怎麼辦？，你可能會直接在瀏覽器的「網址」欄位直接書寫新網址對吧！那如果要以JavaScript程式來改變瀏覽的位置該如何處理？在JavaScript裡有一個window物件，舉凡與瀏覽器視窗相關的控制都可由window物件的屬性或方法來處理，甚至在有多個瀏覽器視窗的狀況下，還能讓視窗間產生互動的關係！

改變瀏覽位置
在網路上你可能常常遇到寫著：「我們已經搬家啦！三秒後帶你前往新家」這段話的網頁！這時，你什麼事都不用做，當三秒鐘過後，新的網頁內容就會自動出現在眼前，同時，你可以發現瀏覽器「網址」欄位的內容變了，你已經連結到另一份網頁文件去了！這種在同一瀏覽視窗中卻會自動改變瀏覽網址而載入新網頁內容是如何辦到的？

JavaScript中的window物件有一個屬性『location（位置）』，它可以改變你目前的瀏覽網址，然後自動載入新的網頁至目前動作中的瀏覽器視窗裡，請注意：是在同一個瀏覽器視窗中喔！其撰寫格式如下：
Location屬性使用
  1. Window.location = “URL”
『URL』就是所謂的網址，它可以是完整的對外連結也可以是簡易的對內連結！


實作學習：自動轉換網址
  1. <HTML>
  2. <HEAD><TITLE>location屬性</TITLE></HEAD>
  3. <script language="JavaScript">
  4. //轉址函式
  5. function newhome()
  6. {
  7. //自動載入新的網頁至目前動作中的瀏覽器視窗裡
  8. window.location="http://www.twbts.com"
  9. }
  10. </script>
  11. <!-- 網頁載入後延遲3秒鐘後呼叫newhome()函式 -->
  12. <BODY OnLoad="setTimeout('newhome()',3000)">
  13. 我們已經搬家啦！三秒後帶你前往新家
  14. </BODY>
  15. </HTML>

實作學習：快速連結
除了利用setTimeout()計時器配合網頁的OnLoad事件來做定時自動連結外，我們也可以利用表單元件『radio(單選鈕)』來做網站列表的動作，讓瀏覽者自由選取他所希望瀏覽的網站，這必須利用OnClick事件與window物件的location屬性：
  1. <HTML>
  2. <HEAD><TITLE>location屬性</TITLE></HEAD>
  3. <BODY>
  4. <font color="#FF00FF">歡迎來到麻辣家族，請選擇欲參觀的網站</font>
  5. <form>
  6. <p>
  7. <input type="radio"
  8. OnClick="window.location='http://www.twbts.com'">麻辣學園　 
  9. <input type="radio"
  10. OnClick="window.location='http://dgr.twbts.com'">築夢學園　 
  11. <input type="radio"
  12. OnClick="window.location='http://office.twbts.com'">office學園
  13. </form>
  14. </p>
  15. </BODY>
  16. </HTML>


對外連結
對外連結乃是指：超連結的對象(網頁、檔案或圖片……等)與目前瀏覽的網頁是位於不同伺服器上，所以，「連結目標」必須指明連結的「絕對位置」，要明確的指出連結目標所在的伺服器名稱、路徑與檔名，這種指定連結目標「絕對位置」的方式也就是所謂的「絕對路徑」連結，例如：
  1. <A HREF="HTTP://WWW.TWBTS.COM/ad/ad.htm">廣告</A>
建立一個文字超連結，連結目標為位於WWW.TWBTS.COM這個網路伺服器中， /ad 目錄下，名為ad.htm的網頁。


對內連結
相對於「對外連結」，「對內連結」就是超連結的對象(網頁、檔案或圖片……等)與目前瀏覽的網頁是位於相同的伺服器上，正因為連結網頁與被連結的對象位於同一部機器上，所以我們在連結目標時並不需要指定連結目標的伺服器名稱，但是，連結網頁與被連結的對象若位於不同的目錄，則仍然必須明確的指出連結目標所在的目錄位置，例如：
  1. <IMG SRC=”../images/girl.gif”>
上例中，雖然連結網頁與連結目標位於相同的機器上，但因為它們所在的目錄位置不同，所以仍然必須明確的指出連結目標所在的目錄位置，其中『../』代表回到上一層目錄的意思，別忘了：網頁的連結是以其所在目錄為基礎，因此，『../images/girl.gif』的意思是說：請到上一層目錄，然後再到image目錄下找名為girl.gif的圖片檔案。這種以自我位置為中心去相對應連結目標位置的方式，就是所謂的『相對路徑』連結。


另開新瀏覽器視窗
JavaScript不僅可以在相同的瀏覽器視窗中改變瀏覽網址而載入新網頁內容，而且也可以輕易的開啟新的瀏覽器視窗（就如同你利用瀏覽器的『新增視窗』功能一般），而在開啟新瀏覽器視窗的時候還可以同時設定新瀏覽器視窗的外觀樣式。

如果我們要利用JavaScript來新增一個瀏覽器視窗，則必須透過window物件的open()方法：
open()方法基本格式
  1. window.open( “URL” )
『URL』：為新瀏覽器視窗開啟後要連結載入的網頁網址。

實作學習：另開新視窗
在網頁中佈置一個表單按鈕（button）元件，當瀏覽者按下此按鈕後，利用window物件的open()方法，開啟新的瀏覽器視窗，並自動連結載入指定的網址網頁：
  1. <HTML>
  2. <HEAD><TITLE>open方法</TITLE></HEAD>
  3. <BODY>
  4. <script language="JavaScript">
  5. //開新視窗函式
  6. function openNew()
  7. {
  8. window.open("http://www.twbts.com")
  9. }
  10. </script>
  11. <form>
  12. <input type="button" value="按下我將另開新視窗並前往麻辣學園首頁" OnClick="openNew()">
  13. </form>
  14. </BODY>
  15. </HTML>
注意！！
當利用window物件的open()方法，開啟新的瀏覽器視窗，則新的瀏覽器視窗外觀將會是預設的樣式，可能含有「工具列」、「狀態列」…等。


open()方法的屬性
使用window物件的open()方法建立新瀏覽視窗，可以傳遞三組參數，在上一個實作學習中我們已經使用過一個『URL』參數，而open()方法標準的使用參數格式如下！
Open()方法標準格式
  1. window.open( “URL” , “target” , “style”)
  2. Window.open(“位址”,”目標”,”樣式”)
  • 『target』：為新瀏覽視窗的開啟目標，常用於視窗框架網頁製作控制，一般非框架網頁並不使用。
  • 『style』：新瀏覽視窗的外觀樣式屬性設定集合。
如果只要設定「URL(位址)」與「style(樣式)」時：
  1. Window.open(“位址” ,””,”樣式”)
請注意：在”樣式”設定前方有一組雙引號，代表省略”樣式”的前一個參數”目標”，也就是省略新瀏覽視窗的開啟目標！
注意！！open()方法的三項參數傳遞設定，必須依照『URL』、『target』、『style』順序排列，如不須使用則可免填。

除了視窗寬度與高度的設定值必須給予像素單位的數值外，其餘的屬性設定值可以用yes/no或1/0的方式來設定。
假設我們指定開啟一個寬350個像素，高200個像素的新瀏覽器視窗：
  1. window.open(“http://www.twbts.com”,””,”width=350,height=200”)
則我們將只會獲得一個寬350個像素，高200個像素的新瀏覽器視窗，其他的視窗元件將會全部被隱藏起來，這是因為其他的樣式屬性預設值為「no」，如果我們沒有特別指定它們的設定值，它們就會被自動隱藏起來，如下：
  1. <HTML>
  2. <HEAD><TITLE>open方法</TITLE></HEAD>
  3. <BODY>
  4. <script language="JavaScript">
  5. //開新視窗函式
  6. function openNew()
  7. {
  8. window.open("http://www.twbts.com","","width=350,height=200")
  9. }
  10. </script>
  11. <form>
  12. <input type="button" value="按下我將另開新視窗並前往麻辣學園首頁" OnClick="openNew()">
  13. </form>
  14. </BODY>
  15. </HTML>


利用超鏈結開啟新視窗
在我們之前的做過的open()範例中是利用表單元件改變瀏覽器視窗的位址或是定義函式而利用表單元件來開啟新的瀏覽器視窗，在開啟新視窗的同時我們還可以設定新視窗的外觀樣式，有沒有辦法利用超鏈結標籤來建立新瀏覽器視窗呢？答案是肯定的，但是指向超鏈結目的地的標籤內容必須指定為『#（井號）』，同時，超鏈結標籤亦必須包含『OnClick』事件處理器，如下例
  1. <HTML>
  2. <HEAD><TITLE>open方法</TITLE></HEAD>
  3. <BODY>
  4. <script language="JavaScript">
  5. //開新視窗函式
  6. function openNew()
  7. {
  8. newwindw=window.open("http://www.twbts.com","","width=200,height=150")
  9. }
  10. </script>
  11. <a href="#" OnClick="openNew()">點選我將開啟新視窗</a>
  12. </BODY>
  13. </HTML>
雖然這樣可以達到利用超鏈結開啟新瀏覽器視窗的目的，但是還有一個更好的方式：直接將指向超鏈結目的地的標籤內容填寫為JavaScript敘述：javascript：openNew()，這種方式就是所謂的虛擬協定(Pseudo-prorocol)，當我們直接將指向超鏈結目的地的標籤內容填寫為JavaScript敘述，則瀏覽器器將會執行放在『javascript:』後面的程式碼，因此，上例我們也可以改寫如下：
  1. <HTML>
  2. <HEAD><TITLE>open方法</TITLE></HEAD>
  3. <BODY>
  4. <script language="JavaScript">
  5. //開新視窗函式
  6. function openNew()
  7. {
  8. newwindw=window.open("http://www.twbts.com","","width=200,height=150")
  9. }
  10. </script>
  11. <a href="javascript:openNew()">點選我將開啟新視窗</a>
  12. </BODY>
  13. </HTML>


相同函式開啟不同的視窗內容
若在網頁中有兩個以上的超鏈結，這些超鏈結都將開啟相同外觀的新瀏覽器視窗，但是在新視窗的內容裡卻希望有不同的網頁內容，那又該如何處理？建立不同開新視窗的對應函式？大可不必，我們只要修改函式，同時將新瀏覽器視窗開啟後要連結載入的網頁網址當成函式的參數來傳遞即可：
  1. function openNew(newaddress)
  2. {
  3. newwindw=window.open(newaddress,"","width=200,height=150")
  4. }
如此一來，只要在我們呼叫函式的時候，直接傳遞一個網頁名稱或位址參數給函式時，就可以在新視窗中載入所指的網頁，所以，當我們想利用相同的函式時就必須在不同的超鏈結標籤中指定不同的網頁名稱或位址參數值：
  1. <HTML>
  2. <HEAD><TITLE>open方法</TITLE></HEAD>
  3. <BODY>
  4. <script language="JavaScript">
  5. //開新視窗函式
  6. function openNew(address)
  7. {
  8. newwindw=window.open(address,"","width=200,height=150")
  9. }
  10. </script>
  11. <a href="javascript:openNew('http://www.twbts.com')">
  12. 點選我將開啟新視窗連結至麻辣學園
  13. </a>
  14. <br>
  15. <a href="javascript:openNew('http://dgr.twbts.com')">
  16. 點選我將開啟新視窗連結至築夢學園
  17. </a>
  18. </BODY>
  19. </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。使用方向鍵在  說明投影片放映  對話方...