BOM.open用法及新窗口打开教程

// 打开一个空白的新标签页
window.open('');

// 打开一个指定URL的新标签页
window.open('https://www.example.com', '_blank');

// 打开一个指定URL，并控制窗口大小和特性的小窗口
// 注意：现代浏览器对这些特性控制得很严格，很多时候只会打开一个普通的新标签页
window.open('https://www.example.com/login', 'loginWindow', 'width=400,height=300,resizable=no,scrollbars=no,status=no,toolbar=no,menubar=no');

BOM的open()方法有哪些常用参数和它们的作用？

window.open()方法的第三个参数，windowFeatures，是控制新窗口行为的关键，虽然在现代浏览器中，出于安全和用户体验的考虑，许多特性已经不那么容易被开发者完全掌控了，它们更倾向于打开一个普通的新标签页。但了解它们依然重要，尤其是在一些特定场景或旧版应用中。

主要的特性包括：

• width 或 innerWidth: 设置窗口的宽度（单位：像素）。
• height 或 innerHeight: 设置窗口的高度（单位：像素）。
• left 或 screenX: 设置窗口相对于屏幕左边缘的距离（单位：像素）。
• top 或 screenY: 设置窗口相对于屏幕上边缘的距离（单位：像素）。
• menubar: yes 或 no。是否显示菜单栏。
• toolbar: yes 或 no。是否显示浏览器工具栏（如前进、后退按钮）。
• location: yes 或 no。是否显示地址栏。
• status: yes 或 no。是否显示状态栏。
• scrollbars: yes 或 no。是否显示滚动条。
• resizable: yes 或 no。用户是否可以调整窗口大小。
• fullscreen: yes 或 no。是否以全屏模式打开。
• channelmode: yes 或 no。是否以剧院模式（kiosk mode）打开，通常指没有标题栏、菜单栏等。

举个例子，如果你想打开一个尺寸固定、没有多余导航元素的小窗口，可能会这样写：

window.open('about:blank', 'myPopup', 'width=300,height=200,left=100,top=100,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,status=no');
// 注意：'about:blank' 是一个空白页面的特殊URL

然而，实际效果往往取决于用户的浏览器设置和扩展。很多时候，即便你指定了这些特性，浏览器也可能只给你一个默认大小的新标签页，这是为了防止恶意弹窗和提升用户体验。从我个人的经验来看，现在想完全控制一个新开窗口的UI，比以前难多了，而且用户也普遍不喜欢这种被强制改变窗口行为的感觉。

使用window.open()时，如何处理弹出窗口被浏览器拦截的问题？

弹出窗口被拦截是使用window.open()时最常见也最令人头疼的问题之一。浏览器为了保护用户免受垃圾广告和恶意网站的骚扰，普遍内置了弹窗拦截器。这就像一道防火墙，你得知道怎么“合法”地通过它。

核心的解决策略是：确保window.open()调用发生在用户直接交互的事件处理程序中。

浏览器拦截弹窗的逻辑通常是这样的：如果一个window.open()调用不是直接由用户的点击、按键等操作触发的，它很可能会被视为未经请求的弹窗而被拦截。

来看个例子：

容易被拦截的情况（不推荐）：

// 页面加载后立即尝试打开，极大概率被拦截
setTimeout(() => {
    window.open('https://www.example.com', '_blank');
}, 1000);

推荐的做法（不易被拦截）：

document.getElementById('openButton').addEventListener('click', function() {
    const newWindow = window.open('https://www.example.com', '_blank');

    // 检查是否被拦截
    if (newWindow === null || typeof newWindow === 'undefined' || newWindow.closed) {
        alert('弹出窗口被浏览器拦截了，请允许本站的弹出窗口。');
    } else {
        // 成功打开，可以在这里对新窗口进行操作
        console.log('新窗口已打开:', newWindow);
        // newWindow.focus(); // 让新窗口获得焦点
    }
});

在这个例子中，window.open()是在用户点击按钮的事件监听器内部被调用的。这种直接的用户意图关联，会大大降低被拦截的风险。

即使是这样，也不能百分之百保证不被拦截，因为用户可能安装了更严格的浏览器扩展。所以，在代码中加入对newWindow对象的检查，是一个很好的习惯。如果newWindow返回null或undefined，或者newWindow.closed为true（在某些情况下，窗口可能瞬间被打开又关闭），那么就说明弹窗可能被拦截了。