小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

帖子: 1198
主題: 395
精華: 113
積分: 1747
點名: 0
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2025-10-22

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

1^# 跳轉到 » 倒序看帖

打印

字體大小: tT

發表於 2010-5-18 16:22 | 只看該作者

[教學] (教學第13篇)window物件上篇

遙控

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

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

JavaScript中的window物件有一個屬性『location（位置）』，它可以改變你目前的瀏覽網址，然後自動載入新的網頁至目前動作中的瀏覽器視窗裡，請注意：是在同一個瀏覽器視窗中喔！其撰寫格式如下：
Location屬性使用

Window.location = “URL”

複製代碼

『URL』就是所謂的網址，它可以是完整的對外連結也可以是簡易的對內連結！

實作學習：自動轉換網址

<HTML>
<HEAD><TITLE>location屬性</TITLE></HEAD>
<script language="JavaScript">
//轉址函式
function newhome()
{
//自動載入新的網頁至目前動作中的瀏覽器視窗裡
window.location="http://www.twbts.com"
}
</script>
<BODY OnLoad="setTimeout('newhome()',3000)">
我們已經搬家啦！三秒後帶你前往新家
</BODY>
</HTML>

複製代碼

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

<HTML>
<HEAD><TITLE>location屬性</TITLE></HEAD>
<BODY>
<font color="#FF00FF">歡迎來到麻辣家族，請選擇欲參觀的網站</font>
<form>
<p>
<input type="radio"
OnClick="window.location='http://www.twbts.com'">麻辣學園　
<input type="radio"
OnClick="window.location='http://dgr.twbts.com'">築夢學園　
<input type="radio"
OnClick="window.location='http://office.twbts.com'">office學園
</form>
</p>
</BODY>
</HTML>

複製代碼

樓主熱帖

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1198
主題: 395
精華: 113
積分: 1747
點名: 0
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2025-10-22

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

2^#

發表於 2010-5-18 16:25 | 只看該作者

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

對外連結

<A HREF="HTTP://WWW.TWBTS.COM/ad/ad.htm">廣告</A>

複製代碼

建立一個文字超連結，連結目標為位於WWW.TWBTS.COM這個網路伺服器中， /ad 目錄下，名為ad.htm的網頁。

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

對內連結
c:\page\test.htm 網頁要連結 c:\images\girl.gif 這張圖片

<IMG SRC=”../images/girl.gif”>

複製代碼

上例中，雖然連結網頁與連結目標位於相同的機器上，但因為它們所在的目錄位置不同，所以仍然必須明確的指出連結目標所在的目錄位置，其中『../』代表回到上一層目錄的意思，別忘了：網頁的連結是以其所在目錄為基礎，因此，『../images/girl.gif』的意思是說：請到上一層目錄，然後再到image目錄下找名為girl.gif的圖片檔案。這種以自我位置為中心去相對應連結目標位置的方式，就是所謂的『相對路徑』連結。

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1198
主題: 395
精華: 113
積分: 1747
點名: 0
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2025-10-22

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

3^#

發表於 2010-5-18 16:29 | 只看該作者

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

如果我們要利用JavaScript來新增一個瀏覽器視窗，則必須透過window物件的open()方法：
open()方法基本格式

window.open( “URL” )

複製代碼

『URL』：為新瀏覽器視窗開啟後要連結載入的網頁網址。

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

<HTML>
<HEAD><TITLE>open方法</TITLE></HEAD>
<BODY>
<script language="JavaScript">
//開新視窗函式
function openNew()
{
window.open("http://www.twbts.com")
}
</script>
<form>
<input type="button" value="按下我將另開新視窗並前往麻辣學園首頁" OnClick="openNew()">
</form>
</BODY>
</HTML>

複製代碼

注意！！
當利用window物件的open()方法，開啟新的瀏覽器視窗，則新的瀏覽器視窗外觀將會是預設的樣式，可能含有「工具列」、「狀態列」…等。

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1198
主題: 395
精華: 113
積分: 1747
點名: 0
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2025-10-22

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

4^#

發表於 2010-5-18 16:31 | 只看該作者

open()方法的屬性
使用window物件的open()方法建立新瀏覽視窗，可以傳遞三組參數，在上一個實作學習中我們已經使用過一個『URL』參數，而open()方法標準的使用參數格式如下！
Open()方法標準格式

window.open( “URL” , “target” , “style”)
Window.open(“位址”,”目標”,”樣式”)

複製代碼

『target』：為新瀏覽視窗的開啟目標，常用於視窗框架網頁製作控制，一般非框架網頁並不使用。
『style』：新瀏覽視窗的外觀樣式屬性設定集合。

如果只要設定「URL(位址)」與「style(樣式)」時：

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個像素的新瀏覽器視窗：

window.open(“http://www.twbts.com”,””,”width=350,height=200”)

複製代碼

則我們將只會獲得一個寬350個像素，高200個像素的新瀏覽器視窗，其他的視窗元件將會全部被隱藏起來，這是因為其他的樣式屬性預設值為「no」，如果我們沒有特別指定它們的設定值，它們就會被自動隱藏起來，如下圖：

<HTML>
<HEAD><TITLE>open方法</TITLE></HEAD>
<BODY>
<script language="JavaScript">
//開新視窗函式
function openNew()
{
window.open("http://www.twbts.com","","width=350,height=200")
}
</script>
<form>
<input type="button" value="按下我將另開新視窗並前往麻辣學園首頁" OnClick="openNew()">
</form>
</BODY>
</HTML>

複製代碼

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1198
主題: 395
精華: 113
積分: 1747
點名: 0
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2025-10-22

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

5^#

發表於 2010-5-18 16:36 | 只看該作者

利用超鏈結開啟新視窗
在我們之前的做過的open()範例中是利用表單元件改變瀏覽器視窗的位址或是定義函式而利用表單元件來開啟新的瀏覽器視窗，在開啟新視窗的同時我們還可以設定新視窗的外觀樣式，有沒有辦法利用超鏈結標籤來建立新瀏覽器視窗呢？答案是肯定的，但是指向超鏈結目的地的標籤內容必須指定為『#（井號）』，同時，超鏈結標籤亦必須包含『OnClick』事件處理器，如下例