麻辣家族討論版版 - Powered by Discuz! Board

標題: [教學] (教學第14篇)window物件下篇 [打印本頁]

作者: 小誌 時間: 2010-5-18 16:47 標題: (教學第14篇)window物件下篇

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

遠端遙控視窗是由主頁面視窗所建立，也就是說主頁面視窗是「父親」，而遠端遙控視窗則是「兒子」，遠端遙控視窗的建立有兩種時機，一種是在主頁面視窗產生時同時建立，另一種則是當瀏覽者在主頁面視窗點選鏈結時才建立，但是，使用遙控式主從層式架構是在主頁面視窗產生時立即提供遠端遙控視窗，而不須等待瀏覽者自己點選鏈結才建立，否則就失去使用主從式架構的意義了。

<script language="JavaScript">
//建立遙控視窗的函式
function openchoose()
{
newwindw=window.open("5-8-1.htm","","width=100,height=150")
}
</script>

複製代碼

在上列的函式敘述中代表openchoose()函式被呼叫時，將開啟一個寬100個像素、高150個像素，但是沒有工具列、網址欄位或是狀態列的新瀏覽器視窗，這個新視窗也不能調整大小。

為了在主頁面視窗網頁載入時立即提供遠端遙控視窗，所以我們必須在<BODY>標籤內加入OnLoad事件處理器來呼叫建立遠端遙控視窗的函式：

<BODY OnLoad="openchoose()">

複製代碼

(主頁面視窗)

<HTML>
<HEAD><TITLE>遠端遙控</TITLE></HEAD>
<script language="JavaScript">
//建立遙控視窗的函式
function openchoose()
{
newwindw=window.open("5-8-1.htm","","width=100,height=150")
}
</script>
<BODY OnLoad="openchoose()">
我是主網頁視窗<br>
請在遙控視窗中選擇你要參觀的網站
</BODY>
</HTML>

複製代碼

遠端遙控視窗的內容
在遠端遙控視窗的網頁內容中含有實際的「遠端遙控功能」程式碼，在此網頁文件中我們放置著一般的HTML超鏈結，不過在點選這些超鏈結的時候，我們轉向連結的動作並不是發生在遠單遙控視窗內，而是在建立遠端遙控視窗的主頁面視窗中：

<a href="javascript:going('http://www.twbts.com')">
麻辣學園
</a><br>
<a href="javascript:going('http://dgr.twbts.com')">
築夢學園
</a> <br>
<a href="javascript:going('http://office.twbts.com')">
office學園
</a>

複製代碼

這些HTML超鏈結是使用JavaScript虛擬協定來呼叫going()函式，並在呼叫函式時給予超鏈結時轉向時主頁面視窗的連結網址參數。

<script language="JavaScript">
//轉向主頁面視窗連結函式
function going(address)
{
window.opener.location=address
}
</script>

複製代碼

請注意：如果由瀏覽器視窗中另外建立一個新視窗，則此瀏覽器視窗就成為了新視窗的opener(開啟/建立者)，因此，我們在呼叫函式時給予超鏈結時轉向時就必須是：

window.opener.location=”URL”

複製代碼

而不是：

window.location=”URL”

複製代碼

否則，呼叫函式時給予超鏈結時轉向時將會是新視窗本身，而非建立新視窗的瀏覽器視窗！

(遠端遙控視窗)

<HTML>
<HEAD><TITLE>遠端遙控</TITLE></HEAD>
<script language="JavaScript">
//轉向主頁面視窗連結函式
function going(address)
{
window.opener.location=address
}
</script>
<BODY>
<a href="javascript:going('http://www.twbts.com')">
麻辣學園
</a><br>
<a href="javascript:going('http://dgr.twbts.com')">
築夢學園
</a><br>
<a href="javascript:going('http://office.twbts.com')">
office學園
</a>
</BODY>
</HTML>

複製代碼

作者: 小誌 時間: 2010-5-18 16:55

關閉瀏覽器視窗
我們可以利用JavaScrip中window物件的open()方法建立新瀏覽器視窗，可以建立視窗，相對的就可以關閉視窗，要利用JavaScript來關閉視窗，同樣必須使用window物件的方法，那就是close()方法：
close()方法標準格式

window.close()

複製代碼

不過當我們使用close()方法來關閉瀏覽器時會先出現一個『詢問』對話視窗，需要經過我們再次確認才會關閉視窗：
[attach]638[/attach]

<HTML>
<HEAD><TITLE>close()方法</TITLE></HEAD>
<script language="JavaScript">
//關閉視窗的函式
function closewindow()
{
window.close()
}
</script>
<BODY>
<form>
<input type="button" value="按下我將會關閉目前視窗" OnClick="closewindow()">
</form>
</BODY>
</HTML>

複製代碼

怎會這樣？還會出現一個『詢問』對話視窗真是令人討厭ㄚ。因為這個瀏覽視窗並不是由JavaScript所建立開啟出來的，因此在我們使用close()方法想要把這個瀏覽視窗關閉就會出現『詢問』對話視窗，如果我們利用JavaScript來建立一個新視窗，在新瀏覽器視窗內，我們同樣使用window()方法關閉視窗時卻不會出現『詢問』對話視窗：
[attach]639[/attach]

(開新視窗的網頁原始碼)

<HTML>
<HEAD><TITLE>close()方法</TITLE></HEAD>
<BODY>
<script language="JavaScript">
//開新視窗函式
function openNew()
{
newwindw=window.open("5-10-1.htm")
}
</script>
<a href="javascript:openNew()">點選我將開啟新視窗</a>
</BODY>
</HTML>

複製代碼

(關閉視窗的網頁原始碼)

<HTML>
<HEAD><TITLE>close()方法</TITLE></HEAD>
<BODY>
<a href="javascript:window.close()">關閉目前視窗</a>
</BODY>
</HTML>

複製代碼

作者: 小誌 時間: 2010-5-18 17:00

列印瀏覽器視窗內網頁內容
當你在瀏覽個網站，發現某網站中的網頁文件對你非常有用，你想將它列印出來，這時你可能會使用瀏覽器的『列印功能』將網頁畫面內容列印出來。甚至，現在許多網站的網頁中，本身就安排了一個『列印』按鈕或超鏈結讓您直接點選來列印網頁畫面內容，當你按下『列印』按鈕或點選『列印』鏈結時，其實是呼叫了JavaScript的print()方法：
print()方法標準格式

window.print()

複製代碼

列印瀏覽器視窗內網頁畫面內容，這裡並不是說可以直接將網頁畫面輸出至印表機做列印的動作，而是呼叫『列印』對話視窗出來讓你選擇印表機以及設定相關的列印設定，當你按下『列印』對話視窗中的『列印』按鈕後才會真正地進行列印動作：
[attach]640[/attach]

喔喔！我知道了，因為這個瀏覽視窗並不是由JavaScript所建立開啟出來的，因此在我們使用print()方法想要把這個瀏覽視窗的畫面內容列印出來就會出現『列印』對話視窗，呵！不對！不管要列印資料的瀏覽視窗是不是由JavaScript所建立出來的，要列印瀏覽器視窗內網頁畫面內容，就是會出現『列印』對話視窗，很抱歉呦！

實做學習
使用Javascript的print()方法在網頁中建立列印視窗中網頁畫面內容的超鏈結：
[attach]641[/attach]

<HTML>
<HEAD><TITLE>print()方法</TITLE></HEAD>
<BODY>
<a href="javascript:window.print()">列印目前網頁畫面</a>
<p><small> <font color="#FF0080">哎呀！</font>您這個好奇寶寶！這麼想了解小誌啊？既然來到偶的小窩，就告訴您一些小誌的八卦小道消息吧！</small><br>
</p>
</BODY>
</HTML>

複製代碼

作者: 小誌 時間: 2010-5-18 17:18

上一頁與下一頁
當我們利用瀏覽器上網穿梭於各式各樣的網頁時，我們曾經瀏覽的網頁網址將會被瀏覽器記錄下來，這些瀏覽的記錄稱之為：『瀏覽歷史』，而這些瀏覽歷史將可以在瀏覽器工具列按鈕中發現：
[attach]642[/attach]

在上圖中你可以發現：瀏覽記錄的顯示為我們曾經瀏覽過的網頁標題(HTML標籤中<TITLE>與</TITLE>中所包括起來的文字)，萬一網頁中沒有指定網頁標題(網頁中沒有使用<TITLE>標籤)，則出現的將是網頁的連結位址，如下圖：
[attach]643[/attach]

瀏覽歷史的作用乃是方便我們快速前往曾經瀏覽過的網址，當我們按了『上一頁』工具按鈕，我們將會回到上一層的瀏覽歷史記錄去，反之，按了『下一頁』工具按鈕，我們將會回到下一層的瀏覽歷史記錄。

history.back()與history.forward()
history（瀏覽歷史）是window物件的子物件，如果我們要利用JavaScript來達到與瀏覽器『上一頁』工具按鈕相同的功能，則可使用history物件的back()方法。
back()方法標準格式

window.history.back()

複製代碼

而history物件的forward()方法，其功能則與瀏覽器『下一頁』工具按鈕相同的功能
Forward()方法標準格式

window.history.forward()

複製代碼

實例學習：
使用JavaScript虛擬協定建立「上一頁」與「下一頁」的超鏈結。

<HTML>
<HEAD><TITLE>上一頁/下一頁</TITLE></HEAD>
<BODY>
<a href="javascript:window.history.back()">回上一頁</a><br>
<a href="javascript:window.history.forward()">到下一頁</a>
</BODY>
</HTML>

複製代碼

[attach]644[/attach]

作者: 小誌 時間: 2010-5-18 17:21

history.go()方法
使用JavaScript來設計「上一頁」與「下一頁」的瀏覽器功能，除了可使用history.back()方法與history.forward()方法來分別設計外，還可利用單一的history.go()方法來達到這兩個功能：
go()方法標準格式

window.history.go(number)

複製代碼

Number參數是一個帶有正負號的數字，「+」號代表前往（下一頁），「-」號代表返回（上一頁），而數字則代表歷史記錄的位置，例如：

回到上一頁
Window.history.go(-1)
前往下一頁
window.history.go(+1)

複製代碼

提示！！
如果我們沒有在history.go()方法中填入任何參數，則代表將目前瀏覽視窗中的網頁文件再重新載入一次！

實例學習：
使用history.go()方法建立「上一頁」與「下一頁」的超鏈結。

<HTML>
<HEAD><TITLE>上一頁/下一頁</TITLE></HEAD>
<BODY>
<a href="javascript:window.go(-1)">回上一頁</a><br>
<a href="javascript:window.history.go(+1)">到下一頁</a>
</BODY>
</HTML>

複製代碼

[attach]645[/attach]

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