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

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

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

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


当前回答

这将创建一个虚拟的a元素,并为其提供target=“_blank”,因此它将在一个新选项卡中打开,为其提供适当的URL href,然后单击它。

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

然后你可以像这样使用它:

openInNewTab("https://google.com");

重要说明:

这必须在所谓的“可信事件”回调过程中调用,例如,在单击事件期间(在回调函数中不需要直接调用,但在单击操作期间)。否则,浏览器将阻止打开新页面。

如果您在某个随机时刻手动调用它(例如,在一段时间内或在服务器响应之后),它可能会被浏览器阻止(这很有道理,因为这会带来安全风险,并可能导致用户体验不佳)。

其他回答

有很多答案副本建议使用“_blank”作为目标,但我发现这并不奏效。正如Prakash指出的,这取决于浏览器。但是,您可以向浏览器提出某些建议,例如窗口是否应具有位置栏。

如果你提出了足够多的“类似标签的东西”,你可能会得到一个标签,正如Nico对铬的这个更具体问题的回答:

window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');

免责声明:这不是万能药。这仍然取决于用户和浏览器。现在,至少您为希望窗口的外观指定了一个首选项。

是否在新选项卡或新窗口中打开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();
        });
});

我将在一定程度上同意下面的人的观点(此处转述):“对于现有网页中的链接,如果新网页与现有网页是同一网站的一部分,浏览器将始终在新选项卡中打开链接。”至少对我来说,这条“通用规则”适用于Chrome、Firefox、Opera、Internet Explorer、Safari、SeaMonkey和Konqueror。

不管怎样,有一种不那么复杂的方法可以利用对方所呈现的内容。假设我们讨论的是您自己的网站(下面的“thisite.com”),您希望在其中控制浏览器的功能,那么,下面,您希望“specialpage.htm”为空,其中完全没有HTML(这样可以节省从服务器发送数据的时间!)。

 var wnd, URL; // Global variables

 // Specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); // Get reference to just-opened page
 // If the "general rule" above is true, a new tab should have been opened.
 URL = "http://www.someothersite.com/desiredpage.htm";  // Ultimate destination
 setTimeout(gotoURL(), 200);  // Wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { 
   wnd.open(URL, "_self");  // Replace the blank page, in the tab, with the desired page
   wnd.focus();             // When browser not set to automatically show newly-opened page, this MAY work
 }

window.open()不会在新选项卡中打开,如果它不是在实际的单击事件中发生的。在给定的示例中,URL是在实际单击事件上打开的。如果用户在浏览器中有适当的设置,这将起作用。

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });
</script>

同样,如果您试图在click函数中执行Ajax调用,并希望在成功时打开一个窗口,请确保使用async:false选项集执行Ajax调用。

(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')))