在新标签页（而非新窗口）中打开URL

技术背景

在网页开发中，有时需要在新标签页中打开链接，以提供更好的用户体验。然而，不同浏览器对于 window.open() 方法的处理方式不同，且用户的浏览器设置也会影响链接的打开方式。同时，浏览器的弹窗拦截机制也会对新窗口或新标签页的打开造成影响。

实现步骤

1. 使用 window.open() 方法

function openInNewTab(url) {
  window.open(url, '_blank').focus();
}

// 或者直接使用
window.open(url, '_blank').focus();

在大多数情况下，应直接在链接的 onclick 处理程序中调用此方法，以防止弹窗拦截器和默认的“新窗口”行为。例如：

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

2. 使用事件监听器

const button = document.querySelector('#openTab');

// 添加点击事件监听器
button.addEventListener('click', () => {
    // 打开新标签页
    const tab = window.open('https://attacomsian.com', '_blank');
});

3. 创建虚拟 a 元素并模拟点击

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    rel: 'noopener noreferrer',
    href: href,
  }).click();
}

// 使用示例
openInNewTab("https://google.com");

4. 绕过弹窗拦截器（异步请求场景）

const button = document.querySelector('#openTab');

// 添加点击事件监听器
button.addEventListener('click', () => {

    // 打开一个空白窗口
    const tab = window.open('about:blank');

    // 进行 API 调用
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // 处理 JSON 响应
            // 更新实际 URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // 关闭空白窗口
            tab.close();
        });
});

核心代码

JavaScript 核心代码

// 使用 window.open()
function openInNewTab(url) {
  window.open(url, '_blank').focus();
}

// 创建虚拟 a 元素
function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    rel: 'noopener noreferrer',
    href: href,
  }).click();
}

// 绕过弹窗拦截器
const button = document.querySelector('#openTab');
button.addEventListener('click', () => {
    const tab = window.open('about:blank');
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            tab.close();
        });
});

jQuery 核心代码

// 使用 jQuery 创建链接并点击
$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

最佳实践

• 使用有意义的窗口名称：避免使用 target="_blank"，使用特定的窗口名称可以节省处理器资源。例如：

button.addEventListener('click', () => {
    window.open('https://google.com', 'meaningfulName')
})

• 确保在用户操作事件中调用：为避免被浏览器的弹窗拦截器阻止，应在用户的直接操作（如点击按钮）事件中调用打开新标签页的代码。

常见问题

1. 弹窗被拦截

如果 window.open() 不是在实际的点击事件中调用，或者是在异步请求的回调中调用，浏览器可能会将其视为弹窗并进行拦截。解决方法是在用户点击事件中先打开一个空白窗口，然后在异步请求成功后更新该窗口的 URL。

2. 不同浏览器行为不一致

不同浏览器对于 window.open() 的处理方式不同，且用户的浏览器设置也会影响链接的打开方式。例如，Internet Explorer 11 用户可以选择以新窗口或新标签页打开弹窗；Firefox 29 的 window.open(url, '_blank') 行为取决于浏览器的标签设置；Chrome 34 没有直接设置弹窗打开方式的选项，但可以通过编辑注册表来实现。

3. 手动调用时被阻止

如果在随机时刻（如定时器内部或服务器响应后）手动调用打开新标签页的代码，可能会被浏览器阻止，因为这可能存在安全风险并导致较差的用户体验。因此，应确保在所谓的“可信事件”回调中调用该代码。