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

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

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

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

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

当前回答

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

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

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

它会尝试打开一个弹出窗口，而不管您的设置如何，因为“点击”来自自定义操作。

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

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

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

<!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>

2013-11-22 11:46:07

其他回答

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

2013-08-23 21:00:55

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

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

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

它会尝试打开一个弹出窗口，而不管您的设置如何，因为“点击”来自自定义操作。

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

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

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

<!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>

2013-11-22 11:46:07

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调用。

2012-10-31 13:15:53

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

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

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

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

2013-10-18 12:35:27

只要省略strWindowFeatures参数，就会打开一个新选项卡，除非浏览器设置覆盖它（浏览器设置胜过JavaScript）。

新建窗口

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

新建选项卡

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

--或--

var myWin = window.open(strUrl);

2014-11-18 09:14:33

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

推荐文章

最新文章

标签