在后台打开新标签页？

79

我想使用javascript在其他标签中打开新页面，但仍将重点放在当前标签上。我知道我可以这样做：

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

但是，当我在chrome中执行此操作时，它会闪烁新标签一会儿，然后再切换回当前标签。我想避免这种情况。

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

javascript google-chrome

— 升压
source

w3schools.com/js/js_ex_browser.asp尝试任何这些

— 代码间谍

1

@ jolly.exe谢谢，但是没有一个避免暂时在chrome中显示新页面。

— 2012年

3

似乎是这个问题的重复stackoverflow.com/questions/6897430/…解决方案是使用Chrome扩展api。

— Willem Joosten

@WillemJoosten感谢您已经完成目标的第一个答案。但是在扩展之外有什么方法可以做到这一点吗？好处是如此之小，以至于安装扩展所需的时间将被抵消。

— st-boost

防止聚焦window.open

— mariotomo

102

更新：谷歌浏览器的版本41， initMouseEvent 似乎已更改的行为。

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

行动中： 提琴

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

仅在铬上测试

— 安姆罗
source

8

太棒了，我想我们明白了。不过，重要的一点是：在OSX上，需要将metaKey值设为true。

— st-boost

4

另一个注意事项：除非您设置，否则这不适用于具有锚文本的URL a.target='_blank';。

— st-boost

1

这很有帮助。您真棒：D

— iAnuj 2012年

24

这似乎已停止与2014-11-20版（在Linux上测试）的Google Chrome开发版本41.0.2224.0一起使用。不足为奇，因为我猜想它是“意想不到的功能”，但由于在本地应用程序中大量使用了它，所以很烦人。Chrome的稳定版和测试版通道目前应该不会受到影响，但可能会很快合并更改。

— 丹尼尔·安德森

5

@ maggot092使用MouseEvent('click', {view: window, ctrlKey: true, metaKey: true});，新打开的选项卡仍会占据焦点。我想念什么吗？

— Stepan Parunashvili 2015年

9

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

— 用户名
source

3

从MDN“已弃用此功能已从Web标准中删除。尽管某些浏览器可能仍支持此功能，但该功能正在被删除。请勿在新旧项目中使用它。使用它的页面或Web应用可能会在任何时间。”

— BaSsGaz 2015年

1

据我所知，这是由浏览器设置控制的。换句话说：用户可以选择是否要在后台或前台打开新选项卡。他们还可以选择是在新选项卡中打开新的弹出窗口，还是只是...弹出窗口。

例如在Firefox首选项中：

Firefox设置示例

注意最后一个选项。

— 行为
source

3

谢谢，但是我希望可以在一个网站中控制某些事情，因为我不希望这会影响其他网站。（同样，按ctrl / cmd +单击也可以做同样的事情-我一直都用它）

— st-boost

1

这不适用于javascript，仅适用于浏览器设置。

— 林

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行）

^{您唯一可能不喜欢的是，新选项卡在主页之前打开。}

— 马格克
source

1

谢谢，这是一个聪明的方法。但是，它有很多问题，包括破坏事件监听器，浏览器历史记录未对齐，可能更改doctype以及丢弃html元素上的属性，更不用说它实际上并没有“以不同的方式打开新页面”这一事实。标签”。

— st-boost

为什么没有在其他标签中打开新页面？

— Mageek

4

从技术上讲，它将在同一选项卡中打开新页面，并在新选项卡中打开同一页面。我知道那只是语法，没关系-重要的是，这使页面与其历史记录脱离关联（破坏了后退按钮），并使chrome等难以跟踪标签的层次结构。

— st-boost

-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

— 高朗171
source

2

谢谢，但我认为您误解了我的问题。我希望打开器页面最后是重点页面，而不是新选项卡-问题是如何避免一会儿显示新选项卡。

— st-boost

截至今天和最新的Chrome浏览器，它似乎什么都没做。

— 打印机先生