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

【问题标题】：How to make a link open multiple pages when clicked单击时如何使链接打开多个页面
【发布时间】：2011-08-15 12:39:39
【问题描述】：

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

当我点击一个链接时，如何让它们都打开？

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

【问题讨论】：

我会说这些不赞成票可能是因为这种行为会让大多数用户感到惊讶 - 单击一次，一个窗口是非常正常的。
为什么是空白窗口？以及为什么“点击这里”的愚蠢链接文字？
@Paddy：不，否决票是因为问题表述不当。
也许吧。我认为这至少是一个直截了当的问题。也许 -3 有点苛刻，因为这可能是某种内部应用程序或不是什么大问题/不需要的东西。古怪，是的。是否值得在没有对否决票的解释的情况下被埋葬？没有。
稻田，标准？对不起，但是如果您检查一堆消息并单击 [打开选定项目] 链接，如果只打开第一个，那将是令人困惑和烦人的。每当我们因为坏人做的事情而回避多件事时，我们就表现得好像这些事情只是为了滥用而存在，这就是现在 HTML 更难编写的原因（站点检查框架集，不允许 iframe 等等，名单还在继续……）---在 2015 年底更有效，尽管这是从 2011 年开始的。

标签： javascript jquery html

【解决方案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。通常不是一个好主意，但有时是必要的。

【讨论】：

另外，如果 JavaScript 被禁用，那么点击链接时不会发生任何事情。像往常一样在 HTML 中使用链接可能会更好，但是使用一个类（如 yourlink），然后使用 jQuery 将它们组合成一个链接，打开所有 URL。这样您就可以在 HTML 中指定 URL，而不是在 JavaScript 中。
一种合理的方法，保罗。渐进式增强将拯救我们所有人。
太棒了，本。如果可以，请务必通过单击答案左侧的复选框将其标记为答案。
虽然这在 Firefox 中仍然有效，但 Chrome 的弹出窗口阻止程序现在阻止了第二个 window.open（在 Chrome 37 和 FF 32 中测试）。 JSFiddle：jsfiddle.net/y3p8tpvt

【解决方案2】：

我以一种简单的方式做到了：

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

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

【讨论】：

这个对我有用。谢谢你。还有一件事：窗口将集中在最后的 onclick url 上。 :)

【解决方案3】：

您可能希望安排您的 HTML，以便即使未启用 JavaScript，用户仍可以打开所有链接。（我们称之为渐进式增强。）如果是这样，这样的事情可能会很好：

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

此代码假定您只想在每个页面上使用一个这样的“多重链接”。（我也没有测试过，所以它可能充满了错误。）

【讨论】：

并假设他想使用 jQuery，尽管为了公平起见，他已将其标记为 jQuery。好方法

【解决方案4】：

您可以通过单击打开多个窗口...试试这个..

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

【讨论】：

【解决方案5】：

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

chrome://settings/contentExceptions#popups

【讨论】：

【解决方案6】：

我在 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>

查询：

$(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/

【讨论】：

【解决方案7】：

如果您希望通知访问者哪些链接将被打开，您可以使用 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>

【讨论】：

【解决方案8】：

这是 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/

【讨论】：