JavaScript視窗功能指南之操縱視窗

　　一旦你得到了表示視窗的變數，你就能通過各種方法來操縱它。在前面的介紹中，我們討論過close（）方法：

　　win = window.open("http://www.docjs.com/", "js");

　　win.close();

　　JavaScript提供了許多方法與屬性，我們可以使用它們來控制視窗。

　　移動、滾動、改變大小

　　下面的方法（N4+，IE4+）負責個定視窗的移動、滾動以及大小改變操作：

　　// 移動視窗的螢幕位置到指定的位移x 、y（絕對移動）

　　window.moveTo(iX, iY)

　　// 移動視窗的螢幕位置到指定的位移x 、y（相對移動）

　　window.moveBy(iX, iY)

　　// 滾動視窗的螢幕位置到指定的位移x 、y（絕對滾動）

　　window.scrollTo(iX, iY)

　　// 滾動視窗的螢幕位置到指定的位移x 、y（相對滾動）

　　window.scrollBy(iX, iY)

　　// 改變視窗大小到指定的高度與寬度（絕對改變大小）

　　window.resizeTo(iWidth, iHeight)

　　// 改變視窗大小到指定的高度與寬度（相對改變大小）

　　window.resizeBy(iX, iY)

　　注意，這些方法都屬於window對象，所以它們智能在當前視窗或者其他可以引用的視窗被執行。如果你想動態設定視窗的位置和尺寸，就可以在視窗建立後使用move和resize方法。

　　注意，控制一個包含其他伺服器頁面的視窗是不可能的。

已最大化的視窗
　　我們現在來介紹如何製作一個點擊後可已最大化的視窗的按鈕。

　　下面看看有關這個按鈕的HTML和JavaScript代碼：

　　<SCRIPT LANGUAGE="JavaScript">

　　<!--

　　function maximizeWin() {

　　 if (window.screen) {

　　　　var aw = screen.availWidth;

　　　　var ah = screen.availHeight;

　　　　window.moveTo(0, 0);

　　　　window.resizeTo(aw, ah);

　　 }

　　}

　　// -->

　　</SCRIPT>

　　<FORM><INPUT TYPE="button" VALUE="Maximize" onClick="maximizeWin()"></FORM>

　　注意，resizeTo（）方法引用整個視窗的尺寸。

一個懸浮的廣告
　　在網站上，通過移動廣告視窗，能夠吸引瀏覽者的注意力。我們可以通過調用下面的函數來實現讓視窗左右移動的效果：

　　function makeAd() {

　　 window.open("adpage.html", "ad", "width=468,innerWidth=468,height=80,innerHeight=80,left=0,top=0");

　　}

　　下面是頁面adpage.html的代碼：

　　<SCRIPT LANGUAGE="JavaScript">

　　<!--

　　function startAd() {

　　 if (window.screen) {

　　　　pos = 0;

　　　　aw = screen.availWidth;

　　　　window.moveTo(pos, 0);

　　　　timerID = setInterval("moveAd()", 50);

　　 }

　　}

　　function moveAd() {

　　 if (pos <= 0) inc = 5;

　　 // 5 - so it doesn't pass the right edge

　　 // 10 - accounts for the window chrome

　　 if (pos + 468 + 10 + 5 > aw) inc = -5;

　　 pos += inc;

　　 window.moveTo(pos, 0);

　　}

　　window.onload = startAd;

　　// -->

　　</SCRIPT>

　　當頁面adpage.html裝載後，函數startAD（）被執行。如果使用者的瀏覽器支援window.screen對象，視窗才能移動，因為我們需要使用window.screen來計算螢幕的寬度。視窗在螢幕的上邊界滑動，從左上方（pos＝0）一直到右上方。

　　通過內建的setInterval（）函數，每隔50毫秒移動廣告視窗5個象素。如果點擊了“stop”按鈕，就將執行下面的語句：

　　clearInterval(timerID);

震動的視窗
　　如你所見，move方法能協助你吸引使用者的注意力。如果你想讓訪問者更加震撼，你也許想加入下面的效果：

　　<SCRIPT LANGUAGE="JavaScript1.2">

　　<!--

　　var quakeID = 0;

　　var totalX = 0;

　　var totalY = 0;

　　// max pixels in each movement

　　var maxShift = 10;

　　// min movements in each quake

　　var minJumps = 10;

　　// max movements in each quake

　　var maxJumps = 40;

　　// min milliseconds between two quakes

　　var minBetweenQuakes = 1000;

　　// max milliseconds between two quakes

　　var maxBetweenQuakes = 4000;

　　function jump() { // -maxShift to maxShift

　　 with (Math)

　　　　return (maxShift + 1 - ceil(random() * (maxShift * 2 + 1)));

　　}

　　function winShake() {

　　 for (var i = 0; i < (minJumps + (Math.random() * (maxJumps - minJumps))); i++) {

　　　　dX = jump();

　　　　dY = jump();

　　　　window.moveBy(dX, dY);

　　　　totalX -= dX;

　　　　totalY -= dY;

　　 }

　　 window.moveBy(totalX, totalY);

　　 totalX = 0;

　　 totalY = 0;

　　 quakeID = setTimeout("winShake()", Math.ceil(Math.random() *

　　　　(maxBetweenQuakes - minBetweenQuakes)) + minBetweenQuakes);

　　}

　　window.onload = winShake;

　　//-->

　　</SCRIPT>

　　這段指令碼程式產生一系列的地震效果。當頁面被轉載時（window.onload），就開始產生效果。

　　jump（）方法返回一個隨機整數，範圍從－maxShift到maxShift。下面的程式碼片段負責一個單一震動：

　　for (var i = 0; i < (minJumps + (Math.random() * (maxJumps - minJumps))); i++) {

　　 dX = jump();

　　 dY = jump();

　　 window.moveBy(dX, dY);

　　 totalX -= dX;

　　 totalY -= dY;

　　}

　　由於我們沒有辦法得知視窗的初始位置，我們就必須跟蹤每一次位置調整後的尺寸。totalX和totalY變數中保持了視窗相對於初始位置的數值。當震動效果完畢後，視窗移動回到初始位置。

　　window.moveBy(totalX, totalY);

　　totalX = 0;

　　totalY = 0;

　　在一個任意位置暫停後，winShake（）函數再次被調用：

　　quakeID = setTimeout("winShake()", Math.ceil(Math.random() *

　　 (maxBetweenQuakes - minBetweenQuakes)) + minBetweenQuakes);