在Chrome中一次性打开多个链接作为新标签页

25

我想在 Google Chrome 中一次打开多个链接,但是失败了。

问题:

  1. 被弹窗拦截
  2. 在用户允许弹窗后,在新窗口中打开而不是新标签页中打开

使用 这个方法,我可以在 Firefox 中一次打开多个链接:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" >');</script>
    <link rel="stylesheet" href="style.css">
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
    <button ng-click="openLinks()">Open</button>
</body>

</html>

另外,我遇到了一个找到了一种解决方法的人。

我尝试使用setInterval来逐个打开链接,但它没有奏效。


这似乎有点靠不住,尽管弹出窗口被设计用于阻止弹出窗口,但你仍在尝试绕过弹出窗口屏蔽... :L - user3117575
我没有做什么可疑的事情...看看扩展名,开发者是如何绕过它的?嗯 - user3522457
你想独立于浏览器设置来执行吗?我不认为这是可能的。 - Patrick Collins
9个回答

44
你可以使用原生JavaScript完成这个操作:
<html>
<head>
<script type="text/javascript">
function open_win() {
    window.open("http://www.java2s.com/")
    window.open("http://www.java2s.com/")
}
</script>
</head>

<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>

</html>

如果弹出窗口拦截器给您带来了困扰,这里是一个更针对Chrome的实现:

var linkArray = []; // your links
for (var i = 0; i < linkArray.length; i++) {
    // will open each link in the current window
    chrome.tabs.create({
        url: linkArray[i]
    });
}

这里有一些文档:https://developer.chrome.com/extensions/tabs


"纯JavaScript"在您的示例中运行良好。但是,具有多个open_win函数(和相应按钮)的页面不会为每个按钮打开多个选项卡: - Arthur
19
「纯 JavaScript」在 Chrome 中已经失效(截至 2018 年 1 月),现在只会打开一个标签页,而不是两个。 - Kaddath
5
截至2018年7月,我相信最好的解决方案是这样的:window.open("https://www.ecosia.org", "_new"); window.open("https://www.duckduckgo.com", "secondWindow");关键是要确保第二个窗口有一个名字,而不是"_new",否则浏览器会尝试将链接粘贴到同一个窗口,覆盖第一个“window.open”。我在Chrome和IE中尝试过,它对我有效。 - tfantina
2
截至2019年11月,tfantina的代码只能在移动Safari(iOS 13.2)上打开一个选项卡。但在Mac Safari(13.0.3)上运行良好。 - Ethan Allen
老兄,你的第二个解决方案真是太棒了。 - Revisto

7
因为Chrome扩展 可以访问特殊的Chrome API,所以浏览器扩展能够做到这一点,使用该API,您可以使用以下功能:
chrome.windows.create({tabid: n})

其中 createDatatabid 值比任何当前标签页都要大(您可以使用 chrome.windows.getAll() 找到最大的当前 tabid 值)。

然而,在页面上执行此操作(或在不是 Chrome 扩展的任何地方),这是不可能的,因为 是否在新标签页中打开新窗口完全取决于用户的设置


2
这是正确的。浏览器扩展可以做比网页更多的事情。尽管两者都使用JavaScript,但它们非常不同。 - Maverick

3
值得一提的是,您需要在浏览器设置中实际允许弹出窗口。不要依赖于浏览器的提示询问您是否允许弹出窗口打开。 输入图像描述

1
拯救了这一天,谢谢! - fabienbranchel

3

打开多个选项卡或窗口的最佳方法是使用500ms的setTimeout()

window.open("https://facebook.com", "one", windowFeatures);
setTimeout(function(){
  window.open("https://facebook.com", "two", windowFeatures);
}, 500);

1
以下代码将在按钮点击时打开多个弹出窗口。
<html>
<head>
<title></title>
<script type="text/javascript">
  function open_win() {
 window.open("url","windowName","windowFeatures")
 window.open("url","DifferentWindowName","windowFeatures")// different name for each popup
}
</script>
</head>

<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>

您需要确保每个窗口名称都不同,否则最后一个弹出窗口将覆盖其前面的弹出窗口。因此,您最终将只得到一个弹出窗口。


1

用户将需要允许弹出窗口,但我最终做了以下操作:

function openMultipleTabs(urlsArray){

    urlsArray.forEach(function(url){
        let link     = document.createElement('a');
        link.href    = url;
        link.target  = '_blank';
        link.click();
    });

}

5
这仅在一个选项卡中为我打开它。 - Flimm

0

我有一个简单的解决方案,使用setTimeout,请查看下面

function openMultipleTabs(urlsArray: string[]) {
  urlsArray.forEach((url: string, key: number) => {
    if (key === 0) {
      window.open(url, `_blank_first_${key.toString()}`);
    } else {
      setTimeout(function () {
        console.log("resolved", key);
        window.open(url, `_blank_${key.toString()}`);
      }, 1500 * key);
    }
  });
}

-1

看起来扩展程序使用以下代码来打开这些选项卡。

function openTab(urls, delay, window_id, tab_position, close_time) {
    var obj = {
            windowId: window_id,
            url: urls.shift().url,
            selected: false
    }

    if(tab_position != null) {
        obj.index = tab_position
        tab_position++;
    }

    chrome.tabs.create(obj, function(tab) {
        if(close_time > 0) {
            window.setTimeout(function() {
                chrome.tabs.remove(tab.id);
            }, close_time*1000);
        }
    });

    if(urls.length > 0) {
        window.setTimeout(function() {openTab(urls, delay, window_id, tab_position, close_time)}, delay*1000);
    }

}

如果您想查看扩展程序的代码以供参考,您可以在以下路径中找到扩展程序(适用于Windows):C:\Documents and Settings\*用户名*\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions

尽管查看浏览器扩展的代码可能很有趣,但该代码在网站上是无法运行的。 - Maverick
chrome.tabs.create 是 Chrome API 的一部分,我在我的回答中讨论过它 - 它不会在网页上工作。 - Patrick Collins
我知道它在网页中不起作用,因为它使用Chrome API。那是为了回答他关于扩展开发者如何实现它的问题。 - nyzm

-1

由于现代浏览器(甚至带有阻止程序的旧浏览器)绝对不允许这样做(一个用户操作,一个新标签页)。我的解决方案是:

    openInfoLinks = () => {
        const urlsArray = [
            `https://...`,
            `https://...`,
            `https://...`,
        ]
        window.open(
            urlsArray[this.linkCounter],
            `_blank_${someIdentifier}_${this.linkCounter}`
        );
        this.linkCounter++;
        setTimeout(() => {
            this.linkCounter = 0;
        }, 500);
    }

用户可以使用 ctrl+单击按钮 N 次来快速连续打开链接。

你能提供一个测试参考,证明这样的解决方案是可行的吗?先谢谢了。 - Serge
当然,https://codesandbox.io/s/young-architecture-7nzot?file=/src/App.js - Don Kartacs

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接