使用JavaScript 程式操控瀏覽器視窗(一)

使用JavaScript 程式操控瀏覽器視窗(一)
文∕趙英傑

本系列文章將說明如何使用JavaScript程式,執行下列與瀏覽器視窗相關的效果:

  • 開啟指定大小的視窗
  • 從Flash執行JavaScript程式
  • 關閉視窗
  • 指定新視窗的位置
  • 做出「來電震動」的視窗效果
  • 在瀏覽器視窗間傳遞訊息

開啟新的、不帶工具列與選單的瀏覽器視窗,要使用JavaScript的window物件的open()函數。語法格式如下:

window.open('網址','視窗名稱', ‘視窗屬性');

open()函數中的三個參數意義說明如下:

  1. 網址:要開啟在新視窗裡的網址。
  2. 視窗名稱:新視窗的識別名稱,可設定成空字串。
  3. 視窗屬性:設定視窗的大小,以及要顯示或者隱藏的視窗元素(如:選單、工具列、狀態列…等等)。

可用的「視窗屬性」名稱及其意義說明如下:

  • 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;">

按此下載本文範例檔。

Posts created 486

6 thoughts on “使用JavaScript 程式操控瀏覽器視窗(一)

  1. 好難懂…,我在 動作_按鈕 裡面設定嗎?

    🙁

    但是他一直說錯誤… 我要哭了啦

  2. myWindow是該視窗的識別名稱,通常當成超連結的目標名稱使用,讓指定的網址在該視窗中開啟。

  3. 😯
    請問我想用按鈕
    然後觸發我的攝影鏡頭向上的動作
    之後讓他及時的刷新頁面
    不是新開視窗
    那我要怎做?

  4. 請問
    如果是一點開網址
    就是設定好的尺寸(視窗)
    而且要開在螢幕的中間
    這樣要如何做呢

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top