CODEWITHSUNDEEP
javascriptjquerytabswindow
Mindblip
Mindblip

Reputation: 265

Open Links in Multiple Browser Windows / Tabs

I have a requirement to click on multiple links (selecting them) and then click a button that will open all selected links in new windows or tabs. This will of course be dependent upon the browser behaviour.

My plan is to use Javascript to add the selected links to an array and then upon clicking the submit button, the javascript will run through the array and open a new window for each item. I will probably do this in jQuery.

Has anyone done anything similar? Are there alternatives?

Upvotes: 0

Views: 3317

Answers (2)

Krule
Krule

Reputation: 6476

I think you are right.

The best way to achieve what you are describing IMHO is to place URL's of links you want to open in new windows into an array, using return false; in order to prevent actually opening link and then to use some sort of loop to open all of them.

I took a liberty of putting together few lines of jQuery code that will do what you have described:

$(document).ready(function() {
    var $hash = new Array(); // We create new Array 
    $('a').click( function(){ // On each click to <a> element
        if ( $(this).attr("data-pack") == "true" ) { // check wether this is one of the links we use
            $hash[$(this).attr("id")] = $(this).attr("href"); // We add href value into $hash object
            $(this).css("color","green"); // Way to mark selected ones
            $(this).attr("data-pack", "selected"); // Change data-pack property value to selected
            return false; // We don't want to execute this yet
        } else if ( $(this).attr("data-pack") == "selected" ) { // In case you change your mind and want to unselect
            $(this).attr("data-pack", "true"); // Change data-pack property back, thanks to Ambrosia pointing it out in the comment
            $(this).css("color","red"); // We mark it as unset
            delete $hash[$(this).attr("id")]; // Remove it from hash
            return false;
        }
    });

    $("form").submit( function(){ // After we submit
        for (var i in $hash) { // Go trough $hash
            window.open($hash[i]); // And open window for each member
        }
        return false; // We don't actually want to submit form, just open new windows :)
    } );    
});

HTML would look something like:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8" async defer></script>
    <script src="application.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
    <a href="#link1" data-pack="true" id="link1">data</a>
    <a href="#link2" data-pack="true" id="link2">data</a>
    <a href="#link3" data-pack="true" id="link3">data</a>
    <a href="#link4" data-pack="true" id="link4">data</a>
    <a href="#">ordinary link</a>

    <form>          
        <input type="submit" value="submit">
    </form>
</body>
</html>

Upvotes: 2

user211416
user211416

Reputation: 111

I believe the easiest way is to make use of target="_blank" attribute of anchor tag. Create collection of <a> elements and .click through it.

In theory you could use window.open but this method will open a NEW window and not new TAB as you want.

Upvotes: 0

Related Questions