我试图在一个新的选项卡中打开一个URL,而不是弹出窗口。

我见过一些相关的问题,其中的回答大致如下:

window.open(url,'_blank');
window.open(url);

但没有一个对我有效,浏览器仍然试图打开一个弹出窗口。


当前回答

要打开新选项卡并保持在同一位置,可以在新选项卡中打开当前页面,然后将旧选项卡重定向到新URL。

let newUrl = 'http://example.com';
let currentUrl = window.location.href;
window.open(currentUrl , '_blank'); // Open window with the URL of the current page
location.href = newUrl; // Redirect the previous window to the new URL

浏览器将自动将您移动到新打开的选项卡。看起来您的页面已重新加载,您将停留在同一页面上,但在新窗口上:

其他回答

如果链接位于同一域(同一网站),浏览器将始终在新选项卡中打开该链接。如果链接在其他域上,它将在新的选项卡/窗口中打开,具体取决于浏览器设置。

因此,根据这一点,我们可以使用:

<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>

并添加一些jQuery代码:

jQuery(document).ready(function () {
    jQuery(".my-link").on("click",function(){
        var w = window.open('http://www.mywebsite.com','_blank');
        w.focus();
        w.location.href = jQuery(this).attr('rel');
        return false;
    });
});

所以,首先用_blank target在同一个网站上打开新窗口(它将在新选项卡中打开),然后在新窗口中打开您想要的网站。

是否在新选项卡或新窗口中打开URL,实际上由用户的浏览器首选项控制。无法在JavaScript中覆盖它。

window.open()的行为取决于它的使用方式。如果它是作为用户操作的直接结果调用的,让我们假设单击一个按钮,它应该可以正常工作并打开一个新的选项卡(或窗口):

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

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

但是,如果您尝试从AJAX请求回调打开新选项卡,浏览器将阻止它,因为它不是直接的用户操作。

要绕过弹出窗口阻止程序并从回调中打开新选项卡,这里有一个小技巧:

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

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});

如果您只想打开外部链接(指向其他站点的链接),那么JavaScript/jQuery的这一功能很好:

$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});

下面是一个如何将其放入HTML标记的示例

<button onClick="window.open('https://stackoverflow.com/','_blank')">Stackoverflow</button>
(function(a) {
    document.body.appendChild(a);
    a.setAttribute('href', location.href);
    a.dispatchEvent((function(e) {
        e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
        return e
    }(document.createEvent('MouseEvents'))))
}(document.createElement('a')))