CODEWITHSUNDEEP
javascriptgoogle-chrometabsjquery
Taylor Evanson
Taylor Evanson

Reputation: 412

Open multiple tabs with jQuery

Ok, I feel I have done my due diligence here... JSFIddle - http://jsfiddle.net/taytayevanson/8BpHw/5/

I am trying to create a page that will pop multiple tabs. I understand that using this code...

<a href="google.com" target="_blank">New Tab</a>

will pop 1 new tab. However, as explained in this stackoverflow q/a, it needs to be a "user initiated event" for Chrome to pop a new tab and not a window. Because of this requirement, a loop will pop 1 new tab and then new windows for each following link.

jQuery("a.site").each(function(){
    var string = jQuery(this).attr("href") + "/" + jQuery("#arguments").val();
    jQuery(this).attr("href",string);
    jQuery(this).trigger('click');
});

I have tried programmatically creating links and clicking them, with different plugins, timeouts, methods, and I even tried "daisy-chaining" the process and firing it on a page load (a huge PHP/GET variable/page load trigger thing) but it would still pop windows because the event was not user initiated.

I tried this...

function clickLink(link) {
var cancelled = false;

if (document.createEvent) {
    var event = document.createEvent("MouseEvents");
    event.initMouseEvent("click", true, true, window,
        0, 0, 0, 0, 0,
        false, false, false, false,
        0, null);
    cancelled = !link.dispatchEvent(event);
}
else if (link.fireEvent) {
    cancelled = !link.fireEvent("onclick");
}

if (!cancelled) {
    window.location = link.href;
}
}

and although I can read it, I don't understand it well enough to comprehend what i'm supposed to pass into this function. I tried something like this...

jQuery("a.site").each(function(){
    var string = jQuery(this).attr("href") + "/" + jQuery("#launcher").val();
    jQuery(this).attr("href",string);
    clickLink(jQuery(this));
});

But I get a "object has no method 'dispatchEvent'" console error. I tried using that same "var event" and just calling...

link.trigger(event);

but there was a console error there as well. The only thing I have not tried is in this Q/A (using jQuery.get() to open a tab and write to it) but seeing as it still calls window.open(), I feel like i'll still run into the exact same loop issue.

Ok. Got all that out of the way... Is there a real answer for this besides "it's controlled by your browser" ? I feel like there must be a way. Thank you, sorry for the novel :)

Upvotes: 1

Views: 5462

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

See using dispatchEvent to open new tab: {tested on chrome}

DEMO

$('a.site').each(function () {  
    var clk = document.createEvent("MouseEvents");
    clk.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
    this.dispatchEvent(clk);
});

Upvotes: 4

charlietfl
charlietfl

Reputation: 171669

I wouldn't rely on using a triggered click to open a link, not all browsers will support it the same as if user clicks on it ( for obvious security reasons)

Would just loop through the elements and and grab the href, manipulate it the way you want, and pass result to window.open(url).

Upvotes: -1

Related Questions