2019年4月17日 星期三

(16)window物件 下篇

列印瀏覽器視窗內網頁內容
  當你在瀏覽個網站,發現某網站中的網頁文件對你非常有用,你想將它列印出來,這時你可能會使用瀏覽器的『列印功能』將網頁畫面內容列印出來。甚至,現在許多網站的網頁中,本身就安排了一個『列印』按鈕或超鏈結讓您直接點選來列印網頁畫面內容,當你按下『列印』按鈕或點選『列印』鏈結時,其實是呼叫了JavaScript的print()方法:
print()方法標準格式
  1. window.print()
列印瀏覽器視窗內網頁畫面內容,這裡並不是說可以直接將網頁畫面輸出至印表機做列印的動作,而是呼叫『列印』對話視窗出來讓你選擇印表機以及設定相關的列印設定,當你按下『列印』對話視窗中的『列印』按鈕後才會真正地進行列印動作。

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


實做學習
使用Javascript的print()方法在網頁中建立列印視窗中網頁畫面內容的超鏈結:
  1. <HTML>
  2. <HEAD><TITLE>print()方法</TITLE></HEAD>
  3. <BODY>
  4. <!-- 按下鏈結則直接呼叫print()方法 -->
  5. <a href="javascript:window.print()">列印目前網頁畫面</a>
  6. <p><small> <font color="#FF0080">哎呀!</font>您這個好奇寶寶!這麼想了解小誌啊?既然來到偶的小窩,就告訴您一些小誌的八卦小道消息吧!</small><br>      
  7. </p> 
  8. </BODY> 
  9. </HTML>


上一頁與下一頁
當我們利用瀏覽器上網穿梭於各式各樣的網頁時,我們曾經瀏覽的網頁網址將會被瀏覽器記錄下來,這些瀏覽的記錄稱之為:『瀏覽歷史』,而這些瀏覽歷史將可以在瀏覽器工具列按鈕中發現。瀏覽記錄的顯示為我們曾經瀏覽過的網頁標題(HTML標籤中<TITLE>與</TITLE>中所包括起來的文字),萬一網頁中沒有指定網頁標題(網頁中沒有使用<TITLE>標籤),則出現的將是網頁的連結位址。

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

history.back()與history.forward()
history(瀏覽歷史)是window物件的子物件,如果我們要利用JavaScript來達到與瀏覽器『上一頁』工具按鈕相同的功能,則可使用history物件的back()方法。
back()方法標準格式
  1. window.history.back()
而history物件的forward()方法,其功能則與瀏覽器『下一頁』工具按鈕相同的功能
Forward()方法標準格式
  1. window.history.forward()
實例學習:
使用JavaScript虛擬協定建立「上一頁」與「下一頁」的超鏈結。
  1. <HTML>
  2. <HEAD><TITLE>上一頁/下一頁</TITLE></HEAD>
  3. <BODY>
  4. <!-- 回上一個瀏覽歷史 -->
  5. <a href="javascript:window.history.back()">回上一頁</a><br>
  6. <!-- 前往下一個瀏覽歷史 -->
  7. <a href="javascript:window.history.forward()">到下一頁</a>
  8. </BODY> 
  9. </HTML>

history.go()方法
使用JavaScript來設計「上一頁」與「下一頁」的瀏覽器功能,除了可使用history.back()方法與history.forward()方法來分別設計外,還可利用單一的history.go()方法來達到這兩個功能:
go()方法標準格式
  1. window.history.go(number)
Number參數是一個帶有正負號的數字,「+」號代表前往(下一頁),「-」號代表返回(上一頁),而數字則代表歷史記錄的位置,例如:
  1. 回到上一頁
  2. Window.history.go(-1)
  3. 前往下一頁
  4. window.history.go(+1)
提示!!
如果我們沒有在history.go()方法中填入任何參數,則代表將目前瀏覽視窗中的網頁文件再重新載入一次!

實例學習:
使用history.go()方法建立「上一頁」與「下一頁」的超鏈結。
  1. <HTML>
  2. <HEAD><TITLE>上一頁/下一頁</TITLE></HEAD>
  3. <BODY>
  4. <!-- 回上一個瀏覽歷史 -->
  5. <a href="javascript:window.go(-1)">回上一頁</a><br>
  6. <!-- 前往下一個瀏覽歷史 -->
  7. <a href="javascript:window.history.go(+1)">到下一頁</a>
  8. </BODY> 
  9. </HTML>

沒有留言:

張貼留言