如何使链接在单击时打开多个页面

Question

我有两个（或更多）链接，比如：http://google.com和http://yahoo.com。

如何让它们在单击一个链接时同时打开？

例如，一个名为“点击此处”的链接，当单击时将打开两个不同的空白窗口。

- Benjamin

---

我想说这些反对票可能是因为这种行为会让大多数用户感到意外——一次点击，一个窗口是非常常见的。 - Paddy

为什么会出现空白窗口？还有为什么链接文本要这么幼稚的写成“点击这里”？ - Lightness Races in Orbit

@Paddy：不，这些踩的原因是问题表述不清楚。 - Lightness Races in Orbit

也许吧。我认为这至少是一个直截了当的问题。也许-3有点严厉，因为这可能是一些内部应用程序之类的东西，在那里它并不重要/必需。有点奇怪，是的。值得毫无解释地被否决吗？不。 - Adam Terlson

是的，我明白。但有时人们需要在一个点击中显示链接（尤其是在论坛上）。这似乎类似于在mirrorcreator.com上托管文件链接。当然不完全相同，但相似。 - Benjamin

Paddy，是标准吗？不好意思，但如果您选中一堆消息并单击[打开所选项目]链接，则仅打开第一个将会令人困惑和烦恼。每当我们因为坏人的行为而回避多个事物时，我们就像那些事物只存在于滥用之中，这正是使得HTML编写变得更加困难的原因（网站的frameset检查，不允许使用iframes等等，列表还在继续...）--- 尽管这是来自2011年，但在2015年底这更加有效。 - osirisgothra

Answer 1

HTML：

<a href="#" class="yourlink">Click Here</a>

JS：

$('a.yourlink').click(function(e) {
    e.preventDefault();
    window.open('http://yoururl1.com');
    window.open('http://yoururl2.com');
});

window.open 还可以接受额外的参数，可以在这里看到详细信息：http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

你也应该知道，window.open 有时会被弹出窗口拦截器和/或广告过滤器阻止。

以下是来自 Paul 的补充说明：这种方法还需要启用 JavaScript。通常不是个好主意，但有时候是必要的。

- Adam Terlson

---

此外，如果禁用JavaScript，则单击链接时将不会发生任何事情。最好将链接放在HTML中作为普通链接，但使用类（如yourlink），然后使用jQuery将它们组合成一个打开所有URL的链接。这样，您可以在HTML中指定URL，而不是在JavaScript中指定。 - Paul D. Waite

一个不错的方法，Paul。渐进增强会拯救我们所有人。 - Adam Terlson

太棒了，Ben。当你能够时，请通过点击答案左侧的复选框将其标记为答案。 - Adam Terlson

虽然在Firefox中这仍然有效，但Chrome的弹出窗口拦截器现在会阻止第二个window.open（在Chrome 37和FF 32中测试）。 JSFiddle：http://jsfiddle.net/y3p8tpvt/ - Matt

Answer 2

我以简单的方式完成了它：

<a href="http://virtual-doctor.net" onclick="window.open('http://runningrss.com');
return true;">multiopen</a>

它将在新窗口打开runningrss，并在同一窗口中打开virtual-doctor。

- Jeff_Alieffson

---

这个对我有效。谢谢。还有一件事：窗口将在最后的onclick URL上聚焦。 :) - Amninder Singh

Answer 3

如果您希望即使JavaScript未启用，用户仍然可以打开所有链接，则可能希望重新排列您的HTML。 （我们称之为渐进增强）。 如果是这样，类似以下内容可能效果很好：

HTML

<ul class="yourlinks">
    <li><a href="http://www.google.com/"></li>
    <li><a href="http://www.yahoo.com/"></li>
</ul>

jQuery

$(function() { // On DOM content ready...
    var urls = [];

    $('.yourlinks a').each(function() {
        urls.push(this.href); // Store the URLs from the links...
    });

    var multilink = $('<a href="#">Click here</a>'); // Create a new link...
    multilink.click(function() {
        for (var i in urls) {
            window.open(urls[i]); // ...that opens each stored link in its own window when clicked...
        }
    });

    $('.yourlinks').replaceWith(multilink); // ...and replace the original HTML links with the new link.
});

这段代码假设你只想在每个页面上使用一个类似于“多链接”的东西。(我也没有测试过它，所以它可能充满了错误。)

- Paul D. Waite

---

假设他想要使用jQuery，尽管公平地说他已经将其标记为jQuery。好的方法。 - rickyduck

Answer 4

您可以在单击时打开多个窗口...试试这个..

<a href="http://--" 
     onclick=" window.open('http://--','','width=700,height=700'); 
               window.open('http://--','','width=700,height=500'); ..// add more"
               >Click Here</a>`

- Iamat8

Answer 5

这里是一个基本的JavaScript实现示例 - 我将其分离为一个外部文件。 HTML

<a href="" id="multi-link-opener" onclick="openMultipleLinks(myLinks)">Click To Open Links</a>

JS

var myLinks = [
"https://google.com",
"https://www.w3schools.com/jsref/met_win_open.asp",
"https://developer.mozilla.org/en-US/docs/Web/API/Window/open"
]

function openMultipleLinks(links) {
  for (var i = 0; i < links.length; i ++) {
    window.open(links[i]);
  } 
}

请注意，用户必须启用弹出窗口才能打开页面。

以下是演示效果：https://jsfiddle.net/cuppajoeman/rjavuhcg/

- cuppajoeman

Answer 6

您需要为浏览器解除弹出窗口的阻止，代码才能正常工作。

chrome://settings/contentExceptions#popups

- Du Peng

Answer 7

我采用了一种介于Paul和Adam方法之间的混合方法：

打开链接数组的链接已经在HTML中。jQuery只是创建链接数组，并在单击“全部打开”按钮时打开每个链接：

HTML：

<ul class="links">
<li><a href="http://www.google.com/"></a></li>
<li><a href="http://www.yahoo.com/"></a></li>
</ul>

<a id="open-all" href="#">OPEN ALL</a>

JQUERY:

$(function() { // On DOM content ready...
    var hrefs = [];

    $('.links a').each(function() {
        hrefs.push(this.href); // Store the URLs from the links...
    });

    $('#open-all').click(function() {
        for (var i in hrefs) {
            window.open(hrefs[i]); // ...that opens each stored link in its own window when clicked...
        }
    });
});

你可以在这里查看： https://jsfiddle.net/daveaseeman/vonob51n/1/

- daveaseeman

Answer 8

如果您希望通知访问者将要打开哪些链接，您可以使用一个JS函数从HTML元素中读取链接。您甚至可以让访问者像下面所示一样编写/修改链接：

<script type="text/javascript"> 
    function open_all_links() {
        var x = document.getElementById('my_urls').value.split('\n');
        for (var i = 0; i < x.length; i++)
            if (x[i].indexOf('.') > 0)
            if (x[i].indexOf('://') < 0)
                window.open('http://' + x[i]);
            else
                window.open(x[i]);
    }
</script>



<form method="post" name="input" action=""> 
    <textarea id="my_urls" rows="4" placeholder="enter links in each row..."></textarea>
    <input value="open all now" type="button" onclick="open_all_links();">
</form>

- Bilal Dadanlar