使用JavaScript 程式操控瀏覽器視窗(一)
文∕趙英傑
本系列文章將說明如何使用JavaScript程式,執行下列與瀏覽器視窗相關的效果:
- 開啟指定大小的視窗
- 從Flash執行JavaScript程式
- 關閉視窗
- 指定新視窗的位置
- 做出「來電震動」的視窗效果
- 在瀏覽器視窗間傳遞訊息
開啟新的、不帶工具列與選單的瀏覽器視窗,要使用JavaScript的window物件的open()函數。語法格式如下:
window.open('網址','視窗名稱', ‘視窗屬性');
open()函數中的三個參數意義說明如下:
- 網址:要開啟在新視窗裡的網址。
- 視窗名稱:新視窗的識別名稱,可設定成空字串。
- 視窗屬性:設定視窗的大小,以及要顯示或者隱藏的視窗元素(如:選單、工具列、狀態列…等等)。
可用的「視窗屬性」名稱及其意義說明如下:
- width:定義新視窗的寬度。
- height:定義新視窗的高度。
- resizable:能否讓用戶調整視窗大小,可能的設定值為:yes或no(或者1與0)。
- menubar:是否要顯示主功能表,可能的設定值為:yes或no。
- toolbar:是否要顯示「標準按鈕」工具列,可能的設定值為:yes或no。
- location:是否要顯示網址欄位,可能的設定值為:yes或no。
- scrollbars:能否顯示捲軸,可能的設定值為:yes或no。
- status:是否要呈現狀態列,可能的設定值為:yes或no。
- directories:是否要呈現額外的按鈕(例如:「連結」列,以及「標準按鈕」以外的其他按鈕),可能的設定值為:yes或no。
- copyhistory:是否要複製原有瀏覽器視窗的瀏覽歷程(history),可能的設定值為:yes或no。
- fullscreen:是否要以全螢幕方式開啟新視窗(適用於IE瀏覽器),可能的設定值為:yes或no。
上述的「是否」屬性設定的預設值都是「否」。例如,底下的敘述將能在 400 x 200大小、包含「標準按鈕」工具列的新視窗中開啟 https://swf.com.tw/ 網頁:
window.open('https://swf.com.tw/','myWin', 'width=400,height=200,toolbar=yes');
請留意,「視窗屬性」的各個參數要用逗號隔開。讀者可以透過網頁的超連結的onClick事件(在用戶按下超連結時)觸發上述程式,如下:
<a href="#" onClick="window.open('https://swf.com.tw ', 'mywindow', 'width=400,height=200, toolbar=yes')"> 在新視窗中開啟網頁 </a>
請注意,<a>標籤中,紀錄超連結網址的href屬性值被指定成“#”(其實您可以輸入任何超連結網址,請參閱下文說明)’#’在超連結的用途是設定連結錨點名稱,通常用來連結到同網頁的不同部分。
如果要在網頁一開啟時,另外打開指定大小的瀏覽器視窗,請把上述程式片段指派給<body>標籤的onLoad事件(頁面載入完畢後觸發執行),如下:
<body onLoad=”window.open('https://swf.com.tw/', 'mywindow', 'width=400,height=200, toolbar=yes ')”>
在觸發JavaScript程式碼的超連結上設定"#"號有兩個缺點:
- 當游標移到超連結文字上方時,瀏覽器視窗底下的狀態無法顯示「新視窗」的連結網址,而是顯示“#”號。
- 當用戶按下"#"連結觸發程式後,主視窗(包含"#"的)網頁將會被捲動到最上面,而不是停留在原本的位置(因為"#"號會驅使瀏覽器跳到指定名稱的錨點)。
然而,假如超連結文字的連結網址不是設定成"#",那麼,當用戶按下此連結時,瀏覽器將會觸發連結上的onClick事件(開啟新視窗),並且連結到指定的網址。有個方法可以避免瀏覽器在觸發onClick的同時,連結到不同的網頁,只要在onClick程式碼的後面,加上傳回false的敘述即可。例如(以下敘述請寫成一行):
<a href="https://swf.com.tw/" onClick="window.open('https://swf.com.tw/', 'myWindow', 'width=400,height=200'); return false;">
請按此下載本文範例檔。
好難懂…,我在 動作_按鈕 裡面設定嗎?
🙁
但是他一直說錯誤… 我要哭了啦
啥?你有看過範例檔裡面的程式碼嗎?
請問一下,其中的myWindow有作用嗎?
myWindow是該視窗的識別名稱,通常當成超連結的目標名稱使用,讓指定的網址在該視窗中開啟。
😯
請問我想用按鈕
然後觸發我的攝影鏡頭向上的動作
之後讓他及時的刷新頁面
不是新開視窗
那我要怎做?
請問
如果是一點開網址
就是設定好的尺寸(視窗)
而且要開在螢幕的中間
這樣要如何做呢