69

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

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

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

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Benjamin
  • 2,073
  • 4
  • 18
  • 16
  • 7
    I'd say these downvotes are probably because this behaviour will surprise most users - one click, one window is very much the norm. – Paddy Aug 15 '11 at 12:44
  • 2
    Why blank windows? And why the silly link text of "click here"? – Lightness Races in Orbit Aug 15 '11 at 12:46
  • 1
    @Paddy: No, the downvotes are because the question is poorly stated. – Lightness Races in Orbit Aug 15 '11 at 12:46
  • 2
    Perhaps. It's at least a straight-forward question I thought. Perhaps -3 is a little harsh, given that this could be some kind of internal app or something where it's not a big deal/required. Wonky, yes. Worth burying to the ground with no explanation on the downvote? No. – Adam Terlson Aug 15 '11 at 12:46
  • Yes, i see. But sometimes ppl needs to show links in one click(specially at forums). It seems like hosting file links at mirrorcreator.com. Of course not same but similar. – Benjamin Aug 15 '11 at 12:48
  • 2
    paddy, the norm? excuse me but if you check off a bunch of of messages and click the [open selected items] link, it would be confusing and annoying if only the first one opened. Every time we shy away from multiple things because the bad people do it, we are acting like those things exist for abuse only, which is what is making HTML harder to write these days (frameset checking by sites, no iframes allowed, etc, the list goes on and on...) --- even more valid here at the end of 2015 though this is from 2011. – osirisgothra Nov 28 '15 at 11:34

8 Answers8

58

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 also can take additional parameters. See them here: 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.

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

Adam Terlson
  • 12,610
  • 4
  • 42
  • 63
  • Also, if JavaScript is disabled then nothing will happen when the link is clicked on. It might be better to have the links in the HTML as normal, but with a class (like `yourlink`), then use jQuery to combine them into one link which opens all the URLs. That way you get to specify the URLs in the HTML, rather than in the JavaScript. – Paul D. Waite Aug 15 '11 at 12:46
  • 3
    A sound approach, Paul. Progressive Enhancement will save us all. – Adam Terlson Aug 15 '11 at 12:47
  • Awesome, Ben. Be sure to mark it as the answer when you are able by clicking the checkbox on the left of the answer. – Adam Terlson Aug 15 '11 at 12:51
  • 8
    While this still works in Firefox, Chrome's pop-up blocker now blocks the second window.open (tested in Chrome 37 and FF 32). JSFiddle: http://jsfiddle.net/y3p8tpvt/ – Matt Oct 07 '14 at 18:00
24

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 runningrss in a new window and virtual-doctor in same window.

Dan Atkinson
  • 11,391
  • 14
  • 81
  • 114
Jeff_Alieffson
  • 2,672
  • 29
  • 34
12

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

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

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

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
7

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>`
Iamat8
  • 3,888
  • 9
  • 25
  • 35
1

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

chrome://settings/contentExceptions#popups

Chrome browser setting

Du Peng
  • 351
  • 3
  • 3
1

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

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:

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

daveaseeman
  • 165
  • 1
  • 9
1

Here is a basic implementation in javascript - I separated it into an external file

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

Note that the user will have to enable pop-ups for the pages to open.

Here it is in action: https://jsfiddle.net/cuppajoeman/rjavuhcg/

cuppajoeman
  • 252
  • 5
  • 13
0

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:

<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
  • 820
  • 7
  • 14