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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7064998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 00:40:56  来源:igfitidea点击:

How to make a link open multiple pages when clicked

javascriptjqueryhtml

提问by Benjamin

I have two (or more) links. For example: http://google.comand http://yahoo.com.

我有两个(或更多)链接。例如:http://google.comhttp://yahoo.com

How can I make them bothopen when I click on a single link?

当我单击一个链接时,如何使它们打开?

For example, a link entitled "click here" which, when clicked, will open two different blank windows.

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

采纳答案by Adam Terlson

HTML:

HTML:

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

JS:

JS:

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

window.openalso can take additional parameters. See them here: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

window.open也可以带附加参数。在此处查看它们:http: //www.javascript-coder.com/window-popup/javascript-window-open.phtml

You should also know that window.open is sometimes blocked by popup blockers and/or ad-filters.

您还应该知道 window.open 有时会被弹出窗口阻止程序和/或广告过滤器阻止。

Addition from Paul below: This approach also places a dependency on JavaScript being enabled. Not typically a good idea, but sometimes necessary.

下面来自 Paul 的补充:这种方法还依赖于启用的 JavaScript。通常不是一个好主意,但有时是必要的。

回答by Jeff_Alieffson

I did it in a simple way:

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

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

It'll open runningrssin a new window and virtual-doctorin same window.

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

回答by Paul D. Waite

You might want to arrange your HTML so that the user can still open all of the links even if JavaScript isn't enabled. (We call this progressive enhancement.) If so, something like this might work well:

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

HTML

HTML

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

jQuery

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

This code assumes you'll only want to use one “multilink” like this per page. (I've also not tested it, so it's probably riddled with errors.)

这段代码假设您只想在每页使用一个这样的“多链接”。(我也没有测试过它,所以它可能充满了错误。)

回答by Iamat8

You can open multiple windows on single click... Try this..

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

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

回答by daveaseeman

I created a bit of a hybrid approach between Paul & Adam's approach:

我在 Paul 和 Adam 的方法之间创建了一些混合方法:

The link that opens the array of links is already in the html. The jquery just creates the array of links and opens each one when the "open-all" button is clicked:

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

HTML:

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

You can check it out here: https://jsfiddle.net/daveaseeman/vonob51n/1/

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

回答by Bilal Dadanlar

If you prefer to inform the visitor which links will be opened, you can use a JS function reading links from an html element. You can even let the visitor write/modify the links as seen below:

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

回答by Du Peng

You need to unblock the pop up windows for your browser and the code could work.

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

chrome://settings/contentExceptions#popups

铬://设置/内容异常#popups

Chrome browser setting

Chrome 浏览器设置