Question

使用javascript，我想在另一个标签页中打开一个新页面，但仍然专注于当前标签页。我知道我可以这样做：

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

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

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

Answer 1

更新：在Google Chrome浏览器版本41中， initMouseEvent 似乎改变了行为。

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

在行动中： fiddle

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上测试

Answer 2

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();
}

Answer 3

据我记忆，这是由浏览器设置控制的。换句话说：用户可以选择是否要在后台或前台打开新选项卡。他们也可以选择是否应该在新标签中打开新弹出窗口，或者只是弹出窗口。

例如在firefox首选项中：

Firefox setup example

注意最后一个选项。

Answer 4

试试这个。它适用于镀铬，它也可以使用镀铬扩展。所有这些都不适合我。

chrome.tabs.create({ url: "http://www.google.com/", selected: false });

Answer 5

我以一种非常简单的方式完成了你正在寻找的东西。它在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行）

^{你可能唯一不喜欢的是新标签页在主页面之前打开。}

Answer 6

以下是在具有焦点的新标签页上导航有效网址的完整示例。

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

在后台打开一个新标签？

6 个答案: