Window 物件

Window代表瀏覽器的窗口。

所有全局 JavaScript 對象、函數和變量都會自動成為 window 物件的成員。

全局變量是 window 物件的屬性。

全局函數是 window 物件的方法。

甚至(HTML DOM 的)文檔物件也是 window 物件。

屬性

closed 屬性

closed 屬性用來檢查一個視窗是否已經關掉。
if (windowname.closed);

if (window.opener.closed);

defaultStatus 屬性

defaultStatus 屬性用以設定狀態列的預設值。
<body onLoad="window.defaultStatus='Welcome!'";>
DefaultStatus.htm

frames 屬性(陣列)

length 屬性

location 屬性

location 屬性包含視窗現在的 URL,如
<form>
<input type="button" value="Click to search the web"
          onClick="window.location='http://www.yahoo.com';">
</form>
並且這 URL 能夠被即時更改,如
<html>
<head>
<title>Background Colors</title>
<SCRIPT language="JavaScript">
<!--
    function gothere()
    {
        var thename=document.myform.yourname.value;
        if (thename=="Lee")
            window.location="https://www.csie.ntu.edu.tw/~sylee/index.html";
        else
            window.location="http://www.yahoo.com";
    }
//-->
</SCRIPT>
</head>
<body>
<form name="myform">
Your name:
<br>
<input type="text" name="yourname" size="25">
<p>
<input type="button" value="Click for your page" onClick="gothere();">
</form>
</body>
</html>
示範: location.html

也可以將瀏覽器立即轉向到一個新網頁

<html>
<head>
<title>Background Colors</title>
<SCRIPT language="JavaScript">
<!--
    window.location="page2.html";
//-->
</SCRIPT>
</head>
<body>
Lacking Javascript? Click the link below for the new page then!
<br>
<a href="page2.html">New Page</a>
</body>
</html>

name 屬性

name 屬性含有目前視窗的名字。
<html>
<head>
<SCRIPT language="JavaScript">
<!--
    window.name="cool_window";
//-->
</SCRIPT>
</head>
<body>
<SCRIPT language="JavaScript">
<!--
    document.write("This window is named " + window.name);
//-->
</SCRIPT>
</body>
</html>

opener 屬性

opener 屬性用以指開啟目前視窗的視窗。

parent 屬性

parent 屬性用以指目前外框的主框架。

self 屬性

self 屬性用以指目前的視窗。
<body>
<form>
<input type="button" value="Click to search the web"
       onClick="self.location='http://www.yahoo.com';">
</form>
</body>

status 屬性

status 屬性包含在狀態列中文字的設定值。
<body>
<form>
<input type="button" value="Click for Status Message"
       onClick="window.status='Hello!';">
</form>
</body>
下例是利用 onMouseOver 事件,用 status 屬性蓋過defaultStatus 屬性的預設值。
<html>
<head>
<title>Status Bar Sequence</title>
</head>
<body onLoad="window.defaultStatus='Welcome!';">
<a href="page2.com"
   onMouseOver="window.status='Page 2'; return true;">
Click for Page 2!</a>
</body>
</html>

top 屬性

top 屬性用以指包含目前外框的所有外框外的 top window。

方法

alert()方法

    window.alert("Hi there!");

confirm()方法

confirm()方法用來選擇確定或取消一個動作。 執行後的結果,指派到一個變數。例如
<html>
<head>
<SCRIPT language="JavaScript">
<!--
    function gothere()
    {
        var is_sure=window.confirm("Are you sure you want to leave?");
        if (is_sure==true)
        {
            window.location="http://www.yahoo.com";
        }
    }
//-->
</SCRIPT>
</head>
<body>
<b>Click the button to see a personalized page!</b>
<p>
<form>
<input type="button" value="Click to search the web"
       onClick="gothere();">
</form>
</body>
</html>

例題:confirm.html

find()方法

find()方法用來在網頁上找某些文句。
<form>
<input type="button" value="Click to Find text"
       onClick=window.find();">
</form>

print()方法

print()方法用來列印目前的視窗。
<form>
<input type="button" value="Click to Print Page"
       onClick=window.print();">
</form>

prompt()方法

prompt()方法用來提示使用者輸入一些資訊。
<html>
<head>
<SCRIPT language="JavaScript">
<!--
    var thename=window.prompt("What's your name?", "");
    if ( (thename=="") || (thename==null) )
        thename = "Anonymous Visitor";
//-->
</SCRIPT>
</head>
<body>
<SCRIPT language="JavaScript">
<!--
    document.write("<h1>");
    document.write("Hello, " + thename + ", and welcome to my site!");
    document.write("</h1>");
//-->
</SCRIPT>
<p>
Other text for the page.
</body>
</html>

例題:prompt.html

open()方法

open()方法用以開啟一個新視窗。 例如
<SCRIPT language="JavaScript">
<!--
    window.open("/sylee/courses/jscript/hello.htm", "Hi_window");
//-->
</SCRIPT>

例題:pr10_2.html

標準屬性
width
height
directories
location
menubar
resizable
scrollbars
status
toolbar
例題: winattr.html
<html>
<head>
<SCRIPT language="JavaScript">
<!--
    function lauchwin()
    {
        window.open("newpage.htm", "cool", "width=400,height=300,status=yes");
    }
//-->
</SCRIPT>
</head>
<body>
Click the button below to open an arrogant new window ...
<p>
<form>
<input type="button" value="New Window" onClick="lauchwin();">
</form>
</body>
</html>

延伸屬性
適用 JavaScript 1.2 以上。
AlwaysLowered
alwaysRaised
dependent
hotkeys
innerHeight
innerWidth
outerHeight
outerWidth
personalbar
titlebar
z-lock
screenX
screenY
left
top
fullscreen
left, top, 和 fullscreen 三項屬性適用於 Internet Explorer. 假如設定視窗位置的程式要能適應 Netscape 和 Internet Explorer, 在 open() 的參數中就要包括 screenX, screenY, left 和 top 四項屬性。 例如,
<html>
<head>
<SCRIPT language="JavaScript">
<!--
    function launchwin()
    {
        window.open("hello.htm", "Hello", "width=400,height=300,status=yes, screenX=0,left=0,screenY=0,top=0");
    }
//-->
</SCRIPT>
</head>
<body>
Click the button below to open a new window ...
<p>
<form>
<input type="button" value="New Window"
       onClick="launchwin();">
</form>
</body>
</html>
例題: xattr.html

close()方法

close()方法用來關掉一個視窗。
<html>
<body>
I am a new window! I am newer than that old window that open me,
so I am special.  Ha, ha!
<form>
<input type="button" value="Close Window"
       onClick="window.close();">
</form>
</body>
</html>

blur()方法

blur()方法用來將一個視窗放在主視窗後面的背景處。
<html>
<body>
I am a new window! I am newer than that old window that open me,
so I am special.  Ha, ha!
<form>
<input type="button" value="Hide Window"
       onClick="window.blur();">
<input type="button" value="Close Window"
       onClick="window.close();">
</form>
</body>
</html>

focus()方法

focus()方法用來將一個視窗帶回焦點。
<html>
<body onBlur="window.focus();">
I am a new window! I am newer than that old window that open me,
so I am special.  Ha, ha!
<form>
<input type="button" value="Hide Window"
       onClick="window.blur();">
<input type="button" value="Close Window"
       onClick="window.close();">
</form>
</body>
</html>

moveBy()方法

moveBy()方法用來將一個視窗移到另一位置。
<html>
<body onBlur="window.focus();">
I am a new window! I am newer than that old window that open me,
so I am special.  Ha, ha!
<form>
<input type="button" value="Move Window"
       onClick="window.moveBy(50,50);">
<input type="button" value="Close Window"
       onClick="window.close();">
</form>
</body>
</html>

moveTo()方法

moveTo()方法用來將一個視窗移到一個特定位置。
<html>
<body onBlur="window.focus();">
I am a new window! I am newer than that old window that open me,
so I am special.  Ha, ha!
<form>
<input type="button" value="Move Window"
       onClick="window.moveTo(50,50);">
<input type="button" value="Close Window"
       onClick="window.close();">
</form>
</body>
</html>

resizeBy()方法

resizeBy()方法用來重訂視窗的大小。

resizeTo()方法

resizeTo()方法用來重訂視窗到一特定大小。變大用正整數,變小用負整數。

scrollBy()方法

scrollBy()方法用來捲動視窗。向下捲動用正整數,向上用負整數。

scrollTo()方法

scrollTo()方法用來捲動視窗到一個特定位置。

setInterval()方法

setInterval()方法用來在一個間隔時間重複執行一個函式。
<html>
<head>
<SCRIPT language="JavaScript">
<!--
    function annoy_alert()
    {
        window.alert("Am I bothering you yet?");
    }
    window.setInterval("annoy_alert()", 10000);
//-->
</SCRIPT>
</head>
</html>
注意: 引用的函式放在引號內,這是用以阻止函式被立即執行。

clearInterval()方法

clearInterval()方法用來清除setInterval()方法所設定的重複執行動作。
<html>
<head>
<SCRIPT language="JavaScript">
<!--
    function annoy_alert()
    {
        window.alert("Am I bothering you yet?");
    }
    var madness=window.setInterval("annoy_alert()", 10000);
//-->
</SCRIPT>
</head>
<body>
Click the button below to end the endless barrage of alerts.
<p>
<form>
<input type="button" value="Stop the Madness"
       onClick=window.clearInterval(madness);">
</form>
</body>
</html>

setTimeout()方法

setTimeout()方法用來在一段時間之後去執行一個函式。
<head>
<SCRIPT language="JavaScript">
<!--
    function annoy_alert()
    {
        window.alert("Sign my guest book NOW!");
    }
    var theguest=window.setTimeout("annoy_alert()", 10000);
//-->
</SCRIPT>
</head>

clearTimeout()方法

clearTimeout()方法用來在setTimeout()呼叫的時間屆滿之前,解除setTimeout()呼叫。
<html>
<head>
<SCRIPT language="JavaScript">
<!--
    function annoy_alert()
    {
        window.alert("Sign my guest book NOW!");
    }
    var theguest=window.setTimeout("annoy_alert()", 10000);
//-->
</SCRIPT>
</head>
<body>
Click the button below within 10 seconds to avoid an alert message.
<p>
<form>
<input type="button" value="No Alert for Me!"
       onClick=window.clearTimeout(theguest);">
</form>
</body>
</html>