82

使用 javascript，我想在不同的选项卡中打开一个新页面，但仍然专注于当前选项卡。我知道我可以这样做：

open('http://example.com/');
focus();

但是，当我在 chrome 中执行此操作时，它会在切换回当前选项卡之前闪烁新选项卡片刻。我想避免这种情况。

该应用程序是一个个人书签，因此它只需要在最新的 Chrome 中运行。

4

5 回答 5

108

更新：到 41 版的谷歌浏览器，initMouseEvent似乎有一个改变的行为，所以这个答案不再有效。感谢@ Daniel Andersson的评论。

这可以通过在动态生成的元素上模拟ctrl+ click（或任何其他打开背景选项卡的键/事件组合）a并将其href属性设置为所需的url

在行动： 小提琴

function openNewBackgroundTab(){
    var a = document.createElement("a");
    a.href = "http://www.google.com/";
    var evt = document.createEvent("MouseEvents");
    //the tenth parameter of initMouseEvent sets ctrl key
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                                true, false, false, false, 0, null);
    a.dispatchEvent(evt);
}

仅在 chrome 上测试

于 2012-07-09T04:35:39.707 回答
8

THX 这个问题！在所有流行的浏览器上都对我有用：

function openNewBackgroundTab(){
    var a = document.createElement("a");
    a.href = window.location.pathname;
    var evt = document.createEvent("MouseEvents");
    //the tenth parameter of initMouseEvent sets ctrl key
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                                true, false, false, false, 0, null);
    a.dispatchEvent(evt);
}

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(!is_chrome)
{
    var url = window.location.pathname;
    var win = window.open(url, '_blank');
} else {
    openNewBackgroundTab();
}
于 2014-04-04T09:06:27.877 回答
1

As far as I remember, this is controlled by browser settings. In other words: user can chose whether they would like to open new tab in the background or foreground. Also they can chose whether new popup should open in new tab or just... popup.

For example in firefox preferences:

Firefox setup example

Notice the last option.

于 2012-07-03T14:59:08.240 回答
0

我以非常简单的方式完成了您正在寻找的事情。它在 Google Chrome 和 Opera 中非常流畅，在 Firefox 和 Safari 中几乎完美。未在 IE 中测试。

function newTab(url)
{
    var tab=window.open("");
    tab.document.write("<!DOCTYPE html><html>"+document.getElementsByTagName("html")[0].innerHTML+"</html>");
    tab.document.close();
    window.location.href=url;
}

小提琴：http: //jsfiddle.net/tFCnA/show/

解释：
假设有窗口 A1 和 B1 以及网站 A2 和 B2。
我不是在 B1 中打开 B2，然后返回 A1，而是在 A1 中打开 B2，然后在 B1 中重新打开 A2。
（使它起作用的另一件事是我不让用户重新下载 A2，见第 4 行）

您可能不喜欢的唯一一件事是新选项卡在主页之前打开。

于 2012-07-04T23:14:26.273 回答
-3

这是一个完整的示例，用于在具有焦点的新选项卡上导航有效 URL。

HTML：

<div class="panel">
  <p>
    Enter Url: 
    <input type="text" id="txturl" name="txturl" size="30" class="weburl" />
    &nbsp;&nbsp;    
    <input type="button" id="btnopen"  value="Open Url in New Tab" onclick="openURL();"/>
  </p>
</div>

CSS：

.panel{
  font-size:14px;
}
.panel input{
  border:1px solid #333;
}

JAVASCRIPT：

function isValidURL(url) {
    var RegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

    if (RegExp.test(url)) {
        return true;
    } else {
        return false;
    }
}

function openURL() {
    var url = document.getElementById("txturl").value.trim();
    if (isValidURL(url)) {
        var myWindow = window.open(url, '_blank');
        myWindow.focus();
        document.getElementById("txturl").value = '';
    } else {
        alert("Please enter valid URL..!");
        return false;
    }
}

我还使用http://codebins.com/codes/home/4ldqpbw上的解决方案创建了一个 bin

于 2012-07-03T12:03:46.623 回答