HTML DOM 快速導覽 - window 物件的方法 open()

window.open() 用為開啟新增的 window 視窗。



open() 需要至少兩個參數
var w = window.open(sURL, sName[, sFeatures]);


sURL 為視窗需要的資源檔案網址，可以是任何網頁支援的媒體檔案， sName 為自訂的視窗名稱， 第三個參數 sFeatures 可有可無，可以指定視窗相關的設定，如大小等。


window 視窗通常為瀏覽器 (broswer) 新增的視窗或分頁，舉例如下
var w;

function run1() {
    w = window.open("", "", "width=400,height=200");
}

function run2() {
    w.close();
}

function run3() {
    var s = document.getElementById("show"); 
    if (!w) {
        s.innerHTML = "New window has never been opened!";
    }
    else {
        if (!w.closed) {
            s.innerHTML = "New window opened.";
        }
        else {
            s.innerHTML = "New window closed.";
        }
    }
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：window001.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */


此例由 run1() 新增 window 視窗
function run1() {
    w = window.open("", "", "width=400,height=200");
}


此例前兩個參數不指定，因此提供空字串，第三個參數指定新增視窗寬 400px ，高 200px 。


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="window001.js" type="text/javascript"></script>
</head>
<body onload="run3();">
<input type="button" value="OPEN" onclick="run1();">
<input type="button" value="CLOSE" onclick="run2();">
<input type="button" value="CHECK" onclick="run3();">
<div id="show"></div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：window001.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器開啟，由於 <body> 元素 (element) 的 onload 屬性 (attribute) 設定執行 run3() ，所以直接顯示 New window has never been opened!



若是我們按下 NEW 新增視窗，接著按 CHECK ，提示訊息會變成 New window opened.



按下 CLOSE 關閉新增視窗， CHECK ，提示訊息會變成 New window closed.



中英文術語對照
瀏覽器broswer
元素element
屬性element


您可以繼續參考
window 物件


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/window.open
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)