關閉→
當前位置:知科普>IT科技>js開啟新視窗

js開啟新視窗

知科普 人氣:1.53W

js中使用JavaScript window對象(屬於BOM)開啟新視窗。

1、語法:

window.open(URL,name,features);

該方法用於開啟一個新的瀏覽器視窗或查找一個已命名的視窗。

2、參數說明:

URL :一個可選的字元串,聲明瞭要在新視窗中顯示的文檔的 URL。如果省略了這個參數,或者它的值是空字元串,那麼新視窗就不會顯示任何文檔。

name :一個可選的字元串,該字元串是一個由逗號分隔的特徵列表,其中包括數字、字母和下劃線,該字元聲明瞭新視窗的名稱。這個名稱可以用作標記<a> 和 <form> 的屬性 target 的值。如果該參數指定了一個已經存在的視窗,那麼open()方法就不再創建一個新視窗,而只是返回對指定視窗的引用。在這種情況下,features 將被忽略。

features  :一個可選的字元串,聲明瞭新視窗要顯示的標準瀏覽器的特徵。如果省略該參數,新視窗將具有所有標準特徵。

js開啟新視窗

3、常用視窗特徵:

height、width:視窗文檔顯示區的高度、寬度。以像素計。

left、top:視窗的x座標、y座標。以像素計

toolbar=yes | no | 1 | 0:是否顯示瀏覽器的工具欄。黙認是yes。

scrollbars=yes | no | 1| 0是否顯示滾動條。黙認是yes。

location=yes | no | 1 | 0是否顯示地址地段。黙認是yes。

status=yes | no | 1 | 0是否添加狀態欄。黙認是yes。

menubar=yes | no | 1 | 0是否顯示選單欄。黙認是yes。

resizable=yes | no | 1 | 0視窗是否可調節尺寸。黙認是yes。

titlebar=yes | no | 1 | 0是否顯示標題欄。黙認是yes。

fullscreen=yes | no | 1 | 0:是否使用全屏模式顯示瀏覽器。黙認是no。

注意:不同的遊覽器對視窗特徵屬性支援也不相同。

4、使用案例:

開啟新的視窗,視窗特性使用默認值

<body>

<script type="text/javascript">

function openAnother() {

window.open("http://www.baidu.com"); //開啟新視窗,視窗特性全部使用默認值。

}

</script>

<button οnclick="openAnother()">開啟新視窗</button>

</body>

開啟新的視窗,設定視窗特性

<body>

<button οnclick="openAnother();">開啟新視窗</button>

<script type="text/javascript">

var win;

function openAnother () {

win = window.open("http://www.baidu.com", "", "width=400, height=400,left = 200, right = 200, toolbar = no, menubar = no,location=no,resizable=no");//有些特性在個別瀏覽器上已被進制修改。

}

</script>

</body>

js開啟新視窗 第2張

關閉新開啟的視窗

open方法返回開啟的那個視窗的window對象,可以調用close方法關閉新開啟的視窗。

<body>

<button οnclick="openAnother();">開啟新視窗</button>

<button οnclick="closeAnother();">關閉新開啟的視窗</button>

<script type="text/javascript">

var win;

function openAnother () {

win = window.open("http://www.baidu.com", "", "width=400, height=400,left = 200, right = 200, toolbar = no, menubar = no,location=no,resizable=no");

}

function closeAnother() {

win.close();//關閉指定視窗

}

</script>

</body>

TAG標籤:#新視窗 #js #