window.open的详细用法

window.open()可以弹出一个新的窗口，并且通过参数控制窗口的各项属性。

1. 最基本的弹出窗口代码

window.open('httP://codeo.cn/');

2. window.open()各参数详解

示例代码：

window.open('httP://codeo.cn/', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')

各参数详解
　　

• ‘httP://codeo.cn/’ ：弹出窗口的地址；
• ‘newwindow’ ： 弹出窗口的名字（不是文件名），非必须，可用空”代替；
• height=100 ： 窗口高度；
• width=400 ： 窗口宽度；
• top=0 ： 窗口距离屏幕上方的象素值；
• left=0 ： 窗口距离屏幕左侧的象素值；
• toolbar=no ： 是否显示工具栏，yes为显示；
• menubar，scrollbars ： 表示菜单栏和滚动栏。
• resizable=no ： 是否允许改变窗口大小，yes为允许；
• location=no ： 是否显示地址栏，yes为允许；
• status=no ： 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

3. 弹出窗口居中方法

function openWin(url,name,iWidth,iHeight) { 
            //获得窗口的垂直位置 
            var iTop = (window.screen.availHeight - 30 - iHeight) / 2; 
            //获得窗口的水平位置 
            var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; 
            return window.open(url, name, 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no'); 
        }

4. 如何关闭弹出窗口？

在新打开页面中执行代码：

const windowRes = openWin('https://www.baidu.com','', 900, 600)

// 关闭新窗口

windowRes.close()

出现的问题: chrome中的window.open方法中left参数如何在多屏环境下生效？

场景: 我有两个显示屏A和B，在A中使用window.open想在B中打开新的窗口，但是WindowFeatures中的left参数不管取多大都只在A中紧贴右边显示无法在B中出现，但是同样是使用firefox就能在B中完美显示。

原因: 多屏显示器的主屏浏览器和其他屏幕的浏览器的window.screenX或window.screenLeft 不同，会影响弹出窗口的定位，用上面代码可以算出x在水平居中的需求，垂直居中类似

解决: 

var w = 1000;
var left = (window.screenX || window.screenLeft || 0) + (screen.width - w) / 2;

今天的文章window.open的详细用法分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。