Board logo

標題: [教學] (教學第13篇)window物件 上篇 [打印本頁]
作者: 小誌    時間: 2010-5-18 16:22     標題: (教學第13篇)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>
複製代碼
[attach]631[/attach]


實作學習：快速連結
除了利用setTimeout()計時器配合網頁的OnLoad事件來做定時自動連結外，我們也可以利用表單元件『radio(單選鈕)』來做網站列表的動作，讓瀏覽者自由選取他所希望瀏覽的網站，這必須利用OnClick事件與window物件的location屬性：

[attach]632[/attach]
  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>
複製代碼
作者: 小誌    時間: 2010-5-18 16:25

對外連結
對外連結乃是指：超連結的對象(網頁、檔案或圖片……等)與目前瀏覽的網頁是位於不同伺服器上，所以，「連結目標」必須指明連結的「絕對位置」，要明確的指出連結目標所在的伺服器名稱、路徑與檔名，這種指定連結目標「絕對位置」的方式也就是所謂的「絕對路徑」連結，例如：

對外連結
  1. <A HREF="HTTP://WWW.TWBTS.COM/ad/ad.htm">廣告</A>
複製代碼
建立一個文字超連結，連結目標為位於WWW.TWBTS.COM這個網路伺服器中， /ad 目錄下，名為ad.htm的網頁。



對內連結
相對於「對外連結」，「對內連結」就是超連結的對象(網頁、檔案或圖片……等)與目前瀏覽的網頁是位於相同的伺服器上，正因為連結網頁與被連結的對象位於同一部機器上，所以我們在連結目標時並不需要指定連結目標的伺服器名稱，但是，連結網頁與被連結的對象若位於不同的目錄，則仍然必須明確的指出連結目標所在的目錄位置，例如：

對內連結
c:\page\test.htm 網頁要連結 c:\images\girl.gif 這張圖片
  1. <IMG SRC=”../images/girl.gif”>
複製代碼
上例中，雖然連結網頁與連結目標位於相同的機器上，但因為它們所在的目錄位置不同，所以仍然必須明確的指出連結目標所在的目錄位置，其中『../』代表回到上一層目錄的意思，別忘了：網頁的連結是以其所在目錄為基礎，因此，『../images/girl.gif』的意思是說：請到上一層目錄，然後再到image目錄下找名為girl.gif的圖片檔案。這種以自我位置為中心去相對應連結目標位置的方式，就是所謂的『相對路徑』連結。
作者: 小誌    時間: 2010-5-18 16:29

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

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


實作學習：另開新視窗
在網頁中佈置一個表單按鈕（button）元件，當瀏覽者按下此按鈕後，利用window物件的open()方法，開啟新的瀏覽器視窗，並自動連結載入指定的網址網頁：

[attach]633[/attach]
  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()方法，開啟新的瀏覽器視窗，則新的瀏覽器視窗外觀將會是預設的樣式，可能含有「工具列」、「狀態列」…等。
作者: 小誌    時間: 2010-5-18 16:31

open()方法的屬性
使用window物件的open()方法建立新瀏覽視窗，可以傳遞三組參數，在上一個實作學習中我們已經使用過一個『URL』參數，而open()方法標準的使用參數格式如下！
Open()方法標準格式
  1. window.open( “URL” , “target” , “style”)
  2. Window.open(“位址”,”目標”,”樣式”)
複製代碼

如果只要設定「URL(位址)」與「style(樣式)」時：
  1. Window.open(“位址” ,””,”樣式”)
複製代碼
請注意：在”樣式”設定前方有一組雙引號，代表省略”樣式”的前一個參數”目標”，也就是省略新瀏覽視窗的開啟目標！


當我們以open()方法開啟一個新的瀏覽器時，我們還可以同時設定這新瀏覽視窗的外觀樣式，例如：新視窗是否具有「工具列」、「是否出現捲動軸」…等。茲將附屬於open()方法內的視窗設定屬性列表如下：

屬性

設定值

說明

toolbar

yes/no

是否具有工具列

menubar

yes/no

是否具有功能表選項列

status

yes/no

是否具有狀態列

scrollbars

yes/no

是否顯示捲動軸

resizable

yes/no

是否允許使用者調整視窗大小

width

數值

指定視窗的寬度(單位為像素)

height

數值

指定視窗的高度(單位為像素)



注意！！
open()方法的三項參數傳遞設定，必須依照『URL』、『target』、『style』順序排列，如不須使用則可免填，例如：在實作學習5-3.htm中我們只使用了『URL』其餘兩項參數則省略沒有設定。


除了視窗寬度與高度的設定值必須給予像素單位的數值外，其餘的屬性設定值可以用yes/no或1/0的方式來設定。
假設我們指定開啟一個寬350個像素，高200個像素的新瀏覽器視窗：
  1. window.open(“http://www.twbts.com”,””,”width=350,height=200”)
複製代碼
則我們將只會獲得一個寬350個像素，高200個像素的新瀏覽器視窗，其他的視窗元件將會全部被隱藏起來，這是因為其他的樣式屬性預設值為「no」，如果我們沒有特別指定它們的設定值，它們就會被自動隱藏起來，如下圖：
[attach]634[/attach]
  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>
複製代碼
作者: 小誌    時間: 2010-5-18 16:36

利用超鏈結開啟新視窗
在我們之前的做過的open()範例中是利用表單元件改變瀏覽器視窗的位址或是定義函式而利用表單元件來開啟新的瀏覽器視窗，在開啟新視窗的同時我們還可以設定新視窗的外觀樣式，有沒有辦法利用超鏈結標籤來建立新瀏覽器視窗呢？答案是肯定的，但是指向超鏈結目的地的標籤內容必須指定為『#（井號）』，同時，超鏈結標籤亦必須包含『OnClick』事件處理器，如下例
[attach]635[/attach]
  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敘述：javascriptpenNew()，這種方式就是所謂的虛擬協定(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>
複製代碼
作者: 小誌    時間: 2010-5-18 16:39

相同函式開啟不同的視窗內容
若在網頁中有兩個以上的超鏈結，這些超鏈結都將開啟相同外觀的新瀏覽器視窗，但是在新視窗的內容裡卻希望有不同的網頁內容，那又該如何處理？建立不同開新視窗的對應函式？大可不必，我們只要修改函式，同時將新瀏覽器視窗開啟後要連結載入的網頁網址當成函式的參數來傳遞即可：
  1. function openNew(newaddress)
  2. {
  3. newwindw=window.open(newaddress,"","width=200,height=150")
  4. }
複製代碼
如此一來，只要在我們呼叫函式的時候，直接傳遞一個網頁名稱或位址參數給函式時，就可以在新視窗中載入所指的網頁，所以，當我們想利用相同的函式時就必須在不同的超鏈結標籤中指定不同的網頁名稱或位址參數值：
  1. <a href="javascript:openNew('http://www.twbts.com')">
  2. 點選我將開啟新視窗連結至麻辣學園
  3. </a>
  4. <br>
  5. <a href="javascript:openNew('http://dgr.twbts.com')">
  6. 點選我將開啟新視窗連結至築夢學園
  7. </a>
複製代碼
[attach]636[/attach]
  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>
複製代碼




歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)