整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
大家好！我是/小鄭搞碼事/的小鄭
今天和大家分享一下JS如何操作瀏覽器窗口。只講如何打開一個新窗口
先來看效果圖
上面這個圖界面效果就是我們要實現的。
我們常常需要創建一個新窗口，用來向用戶顯示額外的信息，同時又避免他們正在閱讀的信息消失。從實現方案上來看，盡管我們可以用HTML打開一個新的瀏覽器窗口，但是使用JavaScript可以對新窗口的內容和特性進行更多的控制。
接下來，我們看一下怎么實現的
定義一個打開新窗口的函數newWindow。如上面代碼所示，變量catWindow包含一個新的窗口對象，這個對象引用圖像文件icon.png，這個新窗口的名稱是catWin，必須設置名稱，因為我們以后可能希望在a或另一個腳本中引用這個窗口。新窗口的寬度是350像素，高度是260像素，位置是左邊400，上邊400。
頁面中，包含一個onload事件處理程序，它調用newWinLinks函數，newWinLinks循環遍歷頁面上的a，檢查是否有任何a包含class屬性值newWin。如果有，就設置這個a元素的onclick事件處理程序，從而，當點擊這個a時，調用newWindow函數。
總結一下
需要注意兩個地方：
1、newWindow中，在寬度和高度參數中的逗號之間不能有任何空格，如果有空格，那么腳本可能在某些瀏覽器中無效，總地來說，當腳本出現錯誤，需要進行高度時，要首先查找這樣的小問題。
2、比如向窗口中添加參數時，希望窗口具有工具欄，地址欄，滾動條
toolbar=yes,location=yes,scrollbars=yes
參數默認是no，可以不填。當然瀏覽器上表現也有不同，需要知道。
1），彈窗及參數說明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="打開新窗口" onclick="openNewWin()" />
</body>
<script type="text/javascript">
function openNewWin() {
var openWindow = window.open("newTest.html",
"彈到新窗口",
"height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
}
/***
(00) window.open 彈出新窗口的命令
(01) newTest.html 彈出窗口的文件名，或請求地址
(02) 彈出窗口的名字（不是文件名），非必須，可用空''代替
(03) height=100 窗口高度
(04) width=400 窗口寬度
(05) top=0 窗口距離屏幕上方的像素值
(06) left=0 窗口距離屏幕左側的像素值
(07) toolbar=no 是否顯示工具欄，yes為顯示
(08) menubar 表示菜單欄
(09) scrollbars 表示滾動欄
(10) resizable=no 是否允許改變窗口大小，yes為允許
(11) location=no 是否顯示地址欄，yes為允許
(12) status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許
***/
</script>
</html>
（2），彈窗并居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="彈出的窗口居中" onclick="testOpenCenterWindow()" />
</body>
<script type="text/javascript">
function testOpenCenterWindow() {
// 窗口垂直位置水平位置
var iTop = (window.screen.availHeight - 30 - 500) / 2;
var iLeft = (window.screen.availWidth - 10 - 800) / 2; //減width
var openWindow = window.open("newTest.html"
,"測試彈窗口并居中"
,"height=500, width=800, top="+ iTop
+", left="+ iLeft
+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
);
}
</script>
</html>
（3），窗口 location屬性
window對象location屬性是引用Location對象，它表示該窗口顯示文檔的URL
window.location.href="page1.jsp"; //當前窗口顯示指定頁面
window.close(); //關閉本頁面（4），窗口與父窗口通信
近公司用了一個老掉牙的彈窗模式——模式化彈窗，拿出來說說吧~
首先看看API，第一句話說的就是：已廢棄，但是有時候用不用這個，不是你說了算了啊，咋還得聽老大的是不，接下來主要說下showModalDialog()的功能把，以下都是從API的說明中獲取到的信息
創建一個包含HTML文檔的模式化彈出窗口，彈出框后，不能切換到父窗口，但可以父、子窗口互相傳遞數據
returnVal= window.showModalDialog(uri[,arguments][,options]);
retuunVal： 模式化窗口中返回的值，即：window.returnValue設置的值
uri：模式化窗口的HTML或jsp文檔路徑
arguments：父畫面傳遞給dialog的值，即：window.dialogArguments
options：彈出框屬性的設置，下圖為API給出的幾個屬性設置
但這個東西，目前很多瀏覽器都不支持，比如google、Edge、高版本的瀏覽器，用起來很不方便。
因為這東西叫模式化窗口，也可以叫阻態窗口，就是不可以切換到父窗口進行操作，而window.open叫非模式化窗口，可以進行切換的，所以根據所需來使用吧~
喜歡的小伙伴們，點一波關注哦，有疑問的童鞋可以下方留言哈~~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
