通常在一般的業(yè)務(wù)場景下，我們都是傳入一個url，打開一個新窗口就完事了，但是...

第三方登錄彈窗應(yīng)用場景

產(chǎn)品其實(shí)是想在本頁面彈窗起來，用戶就算不登錄也可以立即關(guān)掉，而不影響頁面的瀏覽，增加用戶留存。效果就是點(diǎn)擊qq登錄，這個時(shí)候彈一個窗口，而這個窗口是一個獨(dú)立的web窗口（并非iframe，為啥不用iframe，iframe本身問題比較多能不用盡量不用），怎么實(shí)現(xiàn)這個效果（具體效果可以看愛奇藝官網(wǎng)的三方登錄），我們找找window.open的官方文檔。

let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);
strUrl === 要在新打開的窗口中加載的URL。
strWindowName === 新窗口的名稱。
strWindowFeatures === 一個可選參數(shù)，列出新窗口的特征(大小，位置，滾動條等) 的為一個DOMString
[`DOMString`](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString "DOMString 是一個UTF-16字符串。由于JavaScript已經(jīng)使用了這樣的字符串，所以DOMString 直接映射到 一個String。")。

出處：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open

所以其實(shí)重點(diǎn)就在這個 strWindowFeatures， 其實(shí)他就是一個字符串，只不過是把參數(shù)拼接起來的字符串，下面我示例一個比較常用的幾個參數(shù)

window.open(getUrl, '_blank',  `width=${width}, height=${height}, left=${left}, top=${top}`);

一眼就看明白了，無非是高寬，定位左和上的值，按正常來理解我們這時(shí)候希望彈一個居中的彈窗怎么做，很簡單。

function createOpen () {
  const width = 300
  const height = 300
  let left = (window.innerWidth- width) / 2
  let top =  (window.innerHeight- height ) / 2
  window.open('http://www.baidu.com', '_blank',  `width=${width}, height=${height}, left=${left}, top=${top}`);
}

我們發(fā)現(xiàn)似乎彈窗沒有什么問題，但是如果我們是雙屏的設(shè)備，你把網(wǎng)頁拖到右邊的顯示器，再試試？

然后我們發(fā)現(xiàn)怎么就不居中了呢... left的設(shè)置似乎不生效了？

百思不得其解之后，我們再看一下官方對于left的解釋。

Specifies the distance the new window is placed from the left side of the work area for applications of the user's operating system to the leftmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.
定位相對于當(dāng)前用戶操作系統(tǒng)的work area的最左邊的值。且，不能超出初始化屏幕之外。

似乎明白了，原來left是相當(dāng)于操作系統(tǒng)的左側(cè)，而不是當(dāng)前瀏覽器窗口的左側(cè)。 那么如何解決這個問題呢，只需要判斷當(dāng)前瀏覽器窗口距離操作系統(tǒng)的偏移值，在原來的left的基礎(chǔ)上+這個偏移值就可以解決了。

function createOpen () {
  const width = 300
  const height = 300
  let left = (window.innerWidth-width)/2 + (window.screenX ? window.screenX: window.screenLeft) 
  let top =  (window.innerHeight- height ) / 2 + (window.screenY ? window.screenY: window.screenTop) + (window.outerHeight - window.innerHeight)
  window.open('http://www.baidu.com', '_blank',  `width=${width}, height=${height}, left=${left}, top=${top}`);
}

細(xì)心的同學(xué)發(fā)現(xiàn)為什么top那里+了一個（window.outerHeight - window.innerHeight）呢，這是因?yàn)槲覀兊臑g覽器一般上面有一個很寬的菜單欄，innerHeight是沒有算上面的值的，所以要算上這個值，讓上下居中更加準(zhǔn)確。

這樣處理之后，無論是拖動窗口還是縮小放大窗口， 都沒有問題了。