window.open()實現彈出視窗居中顯示程式碼例項

antzone發表於2017-03-29

本章節通過程式碼例項詳細介紹一下如何讓使用window.open()函式開啟的頁面能夠居中顯示。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css">
html,body{height:100%}
#antzone{
  width:300px;
  line-height:100px;
  background:#CCC;
  font-size:12px;
  text-align:center;
  margin:0px auto;
}
</style>
<script type="text/javascript"> 
var openWindow = function(url, options){
  var str = "";
  if (options) {
    options.height = options.height || 420;
    options.width = options.width || 550;
    //預設為居中
    options.left = options.left || ((screen.width - options.width) / 2); 
    //預設為居中
    options.top = options.top || ((screen.height - options.height) / 2);
  
    for (var prop in options) {
      str += ',' + prop + '=' + options[prop];
    }
    str = str.substr(1);
  };
  window.open(url, 'connect_window_'+ (+new Date), str);
  str = null;
};
window.onload=function(){
  document.body.onclick = function(){
    openWindow("http://www.softwhy.com/",{
      width:888
    });
  }
}
</script> 
</head> 
<body> 
<div id="antzone">softwhy.com</div> 
</body> 
</html>

特別說明:window.open()函式彈出的網頁已經被當前瀏覽器普遍攔截，但是可以通過事件的方式彈出網頁，所以上面的程式碼有點流氓，因為瀏覽器者總會有意無意的點選頁面，最終也能夠彈出視窗。下面介紹一下它的實現過程。

一.程式碼註釋:

1.var openWindow = function(url, options){},此函式實現彈出視窗居中效果，第一個引數是要開啟頁面的地址，第二個引數是一個物件，用來設定視窗的寬度和高度還有left和top值的。

2.var str = ""，宣告一個變數並賦初值為空字串，用來存放彈出視窗的各種設定引數。3.if (options)，判斷是否設定了第二個引數。

4.options.height = options.height || 420，如果有高度的設定就使用人為設定的，否則使用預設的。

5.options.width = options.width || 550，和上面同樣的道理。

6.options.left = options.left || ((screen.width - options.width) / 2)，如果設定了left值就使用此值，否則設定彈出視窗水平居中。

7.options.top = options.top || ((screen.height - options.height) / 2)，和上面同樣的道理。

8.for (var prop in options) {

  str += ',' + prop + '=' + options[prop];

}，遍歷options物件的每一個屬性，並使用逗號分隔，這裡注意了，在字串的開頭會有一個逗號。

9.str = str.substr(1)，因為第一個逗號是無用的，所以要擷取一下。

10.window.open(url, 'connect_window_'+ (+new Date), str)，開啟視窗。

11.str = null，清空字串。

二.相關閱讀:

1.screen.width可以參閱screen.width屬性一章節。 

2.substr()函式可以參閱javascript substr()一章節。

相關文章