JavaScript(四) Window表單操作

標籤：

window：

屬性（值或者子物件）：
opener:開啟當前視窗的源視窗，如果當前視窗是初次開機瀏覽器開啟的，則opener是null，可以利用這個屬性來關閉源視窗。

方法（函數）：
事件（事先設定好的程式，被觸發）：

1.window.open("第一部分"，"第二部分"，"第三部分"，"第四部分"）；

特徵參數：

第一部分：寫要開啟的頁面地址
第二部分：開啟的方式，_blank 是在新視窗開啟
第三部分：控制開啟的視窗，可以寫多個，用空格隔開
              toolbar=no新開啟的視窗無工具條
              menubar=no無功能表列 status=no無狀態欄
              width=100 height=100 寬度高度
              left=100 開啟的視窗距離左邊多少距離
              resizable=no視窗大小不可調
              scrollbars=yes 出現捲軸
              location=yes 有地址欄

傳回值：新開啟的視窗對象

2：最簡單的開啟視窗
window.open("http://www.baidu.com","_blank","toolbar=no");  在一個新視窗中開啟百度。

3：開啟視窗，並儲存在一個變數中
var w= window.open()；

4：只開啟視窗一次，例子如下：

if(w==null)
{
w=window.open("http://www.baidu.com","_blank","toolbar=no");
}

這裡用一個if語句，判斷w的值是否為空白，開啟一個視窗之後w的值就不為空白了，之後再點擊滑鼠調用此函數則不執行開啟新視窗。

5：儲存所有開啟的視窗，將每個開啟的視窗值存入一個數組之中。

function openW()
{
w[i++]=window.open();
}

6： close():關閉指定的視窗  

    window.close()：關閉當前視窗
     w.close()：關閉w視窗
     關閉多個子視窗：放在數組中的視窗：w[i].close();
     關閉開啟當前視窗的源視窗
     window.opener.close();

7：綜合執行個體

（1）只開啟一個視窗，並且關閉子視窗

首先在body中定義兩個div，用onclick="openW()" 或者onclick="closeW()"來設定為按一下滑鼠後觸發，調用函數openW和closeW;

<div style="margin:10px;padding:10px;border:1px solid blue; cursor:pointer;float:left" onclick="openW()" >開啟一個視窗</div><div style="margin:10px;padding:10px;border:1px solid blue; cursor:pointer;float:left" onclick="closeW()" >關閉視窗</div>

在JavaScript語句中寫如下代碼：

<script language="javascript">var w;function openW(){     if(w==null)    {    w=window.open("http://www.baidu.com","_blank","toolbar=no");    }}function closeW(){    w.close();}</script>

效果如：

點擊開啟視窗，彈出了一個新的視窗，再次點擊開啟視窗由於w中的值不為空白了，所以無法再開啟一個視窗：

點擊關閉視窗之後，則將子視窗關閉。

（2）開啟一組視窗，點擊關閉視窗的時候將全部的子視窗關掉

       利用數組w儲存每個開啟的視窗，在關閉的時候用w[i]關掉所有的子視窗，在JavaScript語句中寫如下代碼：

var w = new Array();var i=0;function openW(){        w[i]=window.open("http://www.baidu.com","_blank","toolbar=no");    i++;}function closeW(){    for(var n=0;n<w.length;n++)    {    w[n].close();    }}

開啟了多個視窗：

點擊關閉所有視窗，則一鍵關閉了所有開啟的子視窗。

（3）在子視窗中關閉源視窗：

       在子視窗的檔案中定義兩個函數，一個是關閉自己視窗，一個是關閉源視窗即上一級視窗，在body中用onclick設定為點擊關閉當前視窗的時候調用c()函數，點擊關閉開啟當前視窗的源時候調用cc()函數：

 

function c(){    window.close();}function cc(){    window.opener.close();}

效果如：

 

8：間隔和延遲：

window.setInterval("要執行的代碼"，間隔的毫秒數)
window.clearInterval(間隔的id); 迴圈一次之後用來清除隔幾秒執行的代碼

window.setTimeout("要執行的代碼"，延遲的毫秒數)
window.clearTimeout(延遲的id)；清除setTimeout，一般順延強制較為常用。

（1）間隔執行的例子，其作用是間隔5秒彈出三個視窗，再經過10秒將其關閉。

將window.setInterval("ok()",5000)用一個id來接收，將window.setInterval("cc()",10000)用id2來接收，在程式調用ok()的時候開啟三個網頁，之後用window.clearInterval(id);來清除id的迴圈，之後調用函數cc（）來關閉三個視窗，之後也是清除：

var id,id2;var sina,qq,xinhuafunction cc(){    sina.close();    qq.close();    xinhua.close();    window.clearInterval(id2);}function ok(){    sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");    qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");    xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200");        window.clearInterval(id);        id2 = window.setInterval("cc()",10000);}id = window.setInterval("ok()",5000);

（2）順延強制的例子，其作用也是間隔5秒彈出三個視窗，再經過10秒將其關閉。

這裡用了順延強制就不用清除了，所以一般常用順延強制。

function cc(){    sina.close();    qq.close();    xinhua.close();}function ok(){    sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");    qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");    xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200");        window.setTimeout("cc()",10000);        }window.setTimeout("ok()",5000);

（3）順延強制，每隔5秒開啟三個視窗，開啟4次之後停止。

用的是在迴圈裡面調用自己，這種使用方式要注意條件的設定，否則可能會導致視窗一直在開啟，最後死機。

var sina,qq,xinhua;var i=0;var id;function cc(){    sina.close();    qq.close();    xinhua.close();}function ok(){    sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");    qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");    xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200");        i++;    if(i >= 4)    {        return;    }    else    {        //window.setTimeout("cc()",10000);        id = window.setTimeout("ok()",5000);    }    }window.setTimeout("ok()",5000);

 9：頁面操作

window.navigate("url") ；跳轉頁面；

window.moveTo(x,y)； 移動頁面

window.resizeTo(寬，高)； 調整頁面

window.scrollTo（x,y）；滾動頁面至哪裡

 （1）例子：用navigate隨機開啟三個頁面中的一個

在body中定義一個div:

<div onclick="r()">單擊跳轉網頁</div>

在Script中添加如下代碼：

function r(){    var a= parseInt(Math.random()*10000)%3;    if(a==0)    {        window.navigate("http://www.baidu.com");    }    else if(a==1)    {        window.navigate("http://www.sina.com.cn");    }    else    {        window.navigate("http://www.qq.com");    }}

（2）移動調整頁面，移動到視窗的左上方，頁面的寬和高都是200：

function m(){    window.moveTo(0,0);    window.resizeTo(200,200);}

效果如：

10：模態對話方塊

window.showModalDialog("url"，"向目標對話方塊傳的值"，"視窗特徵參數") 開啟模態對話方塊

模態對話方塊必須關掉才能對後端操作。 模組對話方塊和視窗的區別是永遠置頂。

特徵參數：用分號隔開，像素大小用px。dialogHeight,dialogWidth,center,等

var a = window.dialogArgument:在模態對話方塊中獲得傳過來的值,dialogArgument也是一個屬性，可以接收。

window.showModelessDialog("url"，"向目標對話方塊傳的值"，"視窗特徵參數")開啟非模組對話方塊，不用關閉可以操作後面。

（1）例子：開啟頁面3作為一個模態對話方塊開啟，開啟頁面3作為一個非模態對話方塊開啟

function openModel(){    window.showModalDialog("Untitled-3.html","haha","dialogWidth=300px;dialogHeight=200px;center=yes");}function openModeless(){    window.showModelessDialog("Untitled-3.html");    }

頁面3裡面寫如下代碼，讓開啟視窗每隔0.5秒滾動到最下端

function s(){    window.scrollTo(0,10000);    window.setTimeout("s()",500);}window.setTimeout("s()",500);

開啟模態對話方塊，這個對話方塊只有關掉才可以操作後面的介面：

開啟非模態對話方塊，不用關掉也可以選中下面的介面，但它還是會置頂：

JavaScript(四) Window表單操作