在后台打开一个新标签页?

IT技术 javascript google-chrome
2021-02-01 12:16:53

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

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

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

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

5个回答

更新: 由于@Daniel Andersson ,Google Chrome 版本 41 的initMouseEvent 行为似乎有所改变

这可以通过在动态生成的元素模拟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 上测试

@maggot092 使用MouseEvent('click', {view: window, ctrlKey: true, metaKey: true});,新打开的选项卡仍然抢占焦点。我错过了什么吗?
2021-03-11 12:16:53
这似乎已停止与 2014 年 11 月 20 日发布的 Google Chrome 开发版 41.0.2224.0(在 Linux 上测试)一起使用。这并不奇怪,因为我猜它一开始是“非预期的功能”,但很烦人,因为我在本地应用程序中大量使用了它。Chrome 的稳定版和测试版目前应该不受影响,但可能很快就会合并这些更改。
2021-03-17 12:16:53
太棒了,我想我们明白了。一个重要的注意事项:在 OSX 上,它是需要为真的 metaKey 值。
2021-03-30 12:16:53
另一个注意事项:除非您将a.target='_blank';.
2021-04-03 12:16:53
这很有帮助。你真棒 :D
2021-04-09 12:16:53

谢谢这个问题!在所有流行的浏览器上对我都有好处:

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();
}
来自 MDN "Deprecated 此功能已从 Web 标准中删除。虽然某些浏览器可能仍然支持它,但正在被删除。不要在旧项目或新项目中使用它。使用它的页面或 Web 应用程序可能会在随时。”
2021-03-19 12:16:53

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

例如在 Firefox 首选项中:

火狐设置示例

注意最后一个选项。

这不适用于 javascript,仅适用于浏览器设置。
2021-04-03 12:16:53
谢谢,但我希望可以从网站内控制一些东西,因为我不希望这影响其他网站。(另外,ctrl/cmd + click 也做同样的事情——我一直在使用它)
2021-04-04 12:16:53

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


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

从技术上讲,它会在同一选项卡中打开新页面,并在新选项卡中打开同一页面。我知道这只是无关紧要的语法 - 重要的是这将页面与其历史记录分离(打破后退按钮),并使 chrome 等更难以跟踪标签层次结构。
2021-03-27 12:16:53
谢谢,这是一个聪明的方法。但是,它有很多问题,包括破坏事件侦听器、未对齐浏览器历史记录、可能更改文档类型以及丢弃 html 元素上的属性,更不用说它实际上并没有“以不同的方式打开新页面”这一事实。标签”。
2021-04-03 12:16:53
为什么它不在不同的选项卡中打开一个新页面?
2021-04-03 12:16:53

这是在具有焦点的新选项卡上导航有效 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;
}

Java脚本:

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

截至今天和最新的 Chrome,这似乎根本没有任何作用。
2021-03-30 12:16:53
谢谢,但我想你误解了我的问题。我希望打开页面成为最后关注的页面,而不是新标签 - 问题是我如何避免显示新标签片刻。
2021-04-01 12:16:53