Javascript 在新选项卡（而不是新窗口）中打开URL

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

我看到过一些相关的问题，这些问题的回答类似于：

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

---

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

任何作者都不能选择在新标签页而不是新窗口中打开；这是用户的偏好。（请注意，大多数浏览器中的默认用户首选项都是针对新选项卡的，因此在未更改该首选项的浏览器上进行一次简单的测试将无法证明这一点。）

CSS3提议，但是

---

)；通过在

window.open（）

的第三个参数中为窗口指定特定的窗口功能，当首选项是制表符时，您可以触发一个新窗口。

我认为您无法控制这一点。如果用户已将浏览器设置为在新窗口中打开链接，则不能强制在新选项卡中打开链接

---

为了详细说明史蒂文·斯皮尔伯格的答案，我在这种情况下做了如下工作：

$('a').click(function() {
  $(this).attr('target', '_blank');
});

这样，就在浏览器跟随链接之前，我正在设置目标属性，因此它将在新选项卡或窗口中打开链接（取决于用户的设置）

jQuery中的一行示例：

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

这也可以通过使用本机浏览器DOM API来实现：

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();

这是一个骗局

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

//or just
window.open(url, '_blank').focus();

在大多数情况下，这应该直接发生在链接的

onclick

处理程序中，以防止弹出窗口阻止程序以及默认的“新建窗口”行为。您可以这样做，或者通过向

DOM

对象添加事件侦听器

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

要单击的内容

窗口。如果在实际的单击事件中没有打开（）

将不会在新选项卡中打开。在给定的示例中，URL是在实际单击事件时打开的如果用户在浏览器中具有适当的设置，则此操作将起作用

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

链接
$（“a.link”）。在（“单击”，函数（）{
window.open（'www.yourdomain.com'，'u blank'）；
});

---

类似地，如果您试图在click函数中执行Ajax调用，并希望打开一个成功窗口，请确保使用

async:false

选项集执行Ajax调用。

如果您只想打开外部链接（指向其他站点的链接），那么这一点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');
        }
    });
});

---

一个有趣的事实是，如果用户未调用该操作（单击按钮或其他操作），或者该操作是异步的，则无法打开新选项卡，例如，这将不会在新选项卡中打开：

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

但这可能会在新选项卡中打开，具体取决于浏览器设置：

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});

---

或者您可以创建一个链接元素并单击它

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

---

这不应该被任何弹出窗口阻止程序阻止。。。希望如此。

如果您试图从自定义功能打开新选项卡，则这与浏览器设置无关

在此页面中，打开JavaScript控制台并键入：

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

无论您的设置如何，它都会尝试打开一个弹出窗口，因为“单击”来自自定义操作

为了表现得像在链接上实际的“鼠标点击”，您需要遵循并真正创建它：

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

下面是一个完整的示例（不要在或类似的在线编辑器上尝试，因为它不会让您从那里重定向到外部页面）：

#射击组{
边缘顶部：15px；
宽度：250px；
边框：1px纯蓝色；
文本对齐：居中；
}
单击我以触发自定义单击
函数fire\u custom\u click（）{
警报（“开火咔嗒！”）；
document.getElementById（“我的链接”）.dispatchEvent（（函数（e）{
e、 initMouseEvent（“单击”，真，真，窗口，/*类型，canBubble，可取消，视图*/
0,0,0,0,0，/*详细信息，screenX，screenY，clientX，clientY*/
false，false，false，false，/*ctrlKey，altKey，shiftKey，metaKey*/
0，null）；/*按钮，relatedTarget*/
返回e
}（document.createEvent（'MouseEvents'））；
}
document.getElementById（“firing\u div”）.onclick=fire\u custom\u click；

创建一个

窗口怎么样。open
无法在所有浏览器的新选项卡中可靠地打开弹出窗口
不同的浏览器实现了
窗口的行为。以不同的方式打开
，特别是在用户的浏览器首选项方面。您不能期望
窗口具有相同的行为。open
在所有Internet Explorer、Firefox和Chrome中都是正确的，因为它们处理用户浏览器首选项的方式不同

例如，InternetExplorer（11）用户可以选择在新窗口或新选项卡中打开弹出窗口，您不能强制InternetExplorer11用户通过
窗口以某种方式打开弹出窗口。打开
，如中所述

对于Firefox（29）用户来说，使用
window.open（url，'.'u blank'）
取决于他们浏览器的选项卡首选项，，尽管您仍然可以通过指定宽度和高度强制他们在新窗口中打开弹出窗口（请参阅下面的“Chrome怎么样？”部分）

示范
转到浏览器的设置并将其配置为在新窗口中打开弹出窗口

Internet Explorer（11）


测试页
在如上所示设置Internet Explorer（11）以在新窗口中打开弹出窗口后，使用以下测试页面测试
窗口。打开
：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

请注意弹出窗口是在新窗口中打开的，而不是在新选项卡中打开的。

您还可以在Firefox（29）中将其选项卡首选项设置为新窗口的情况下测试上述代码段，并看到相同的结果

铬呢？它实现了
窗口。open
与InternetExplorer（11）和Firefox（29）不同。
我不是100%确定，但Chrome（版本
34.0.1847.131 m
）似乎没有任何设置，用户可以使用这些设置来选择是否在中打开弹出窗口
<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</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
 }

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

gBrowser.selectedTab = gBrowser.addTab("http://example.com");

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

var myWin = window.open(strUrl, strWindowName);

var myWin = window.open(strUrl);

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

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

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>


 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });

//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};

$(function () {
    $('#btn').click(function () {
        openNewTab("http://stackoverflow.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

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

Js
$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href',"http://someurl.com");
        $(this).trigger('click');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>

function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

// init urls
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
// open window with url of current page, you will be automatically moved 
// by browser to a new opened tab. It will look like your page is reloaded
// and you will stay on same page but with new page opened
window.open(currentUrl , '_blank');
// on your current tab will be opened new url
location.href = newUrl;

let a= document.createElement('a');
a.target= '_blank';
a.href= 'https://support.wwf.org.uk/';
a.click(); // we don't need to remove 'a' from DOM because we not add it

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

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