Open a page in a new tab with JS

Question

I am converting some <ul> into a <select> for small devices, like this:

$("#blog aside .widget, #blog-single aside .widget").each(function() {
            var widget = $(this);
            $("<select />").appendTo(widget);
            /* option en blanco*/
            $("<option />", {
                "value"   : '',
                "text"    : widget.find('h3').text()+'..'
            }).appendTo(widget.find('select'));
            widget.find('ul li a').each(function(){
                var el = $(this);
                $("<option />", {
                    "value"   : el.attr("href"),
                    "text"    : el.text()
                }).appendTo(widget.find('select'));
            });
        });

And i would like to open this links in a new tab, this is how i'm trying:

$("#blog select, #blog-single select").change(function() {
            var url = $(this).find("option:selected").val();
                /* simulamos target _blank, ya que son externos */
                var a = document.createElement('a');
                a.href= url;
                a.className = 'external';
                a.target = '_blank';
                document.body.appendChild(a);               
                a.click();
        });

wich seems to do the job in Firefox but in chrome i'm getting the blocked popup warning (it won't thought if the user clicks instead of simulating it with JS

any workaround this?

possible duplicate of [Open url in new tab using javascript](http://stackoverflow.com/questions/4907843/open-url-in-new-tab-using-javascript) — jcubic, Aug 20 '13 at 13:25

score 0 · Answer 1 · answered Aug 20 '13 at 13:24

0

To avoid you can use a form to invoke the screen

$("#blog select, #blog-single select").change(function() {
    var url = $(this).find("option:selected").val();
    /* simulamos target _blank, ya que son externos */
    var form = document.createElement('form');
    form.action= url;
    form.method = 'get';
    form.target = '_blank';
    document.body.appendChild(form);               
    form.submit();
    setTimeout(function(){

       document.body.removeChild(form);

    },1000);


 });

answered Aug 20 '13 at 13:24

Luan Castro

1,184
7
14

sorry but browsers block new windows that were opened without user interaction, try add the event with a window.open inside. http://stackoverflow.com/questions/12247368/javascript-window-open-function-opens-link-without-popup-blocker – Luan Castro Aug 20 '13 at 14:29

score 0 · Accepted Answer · answered Aug 26 '13 at 08:21

This is how we ended up "solving" it,

check if the popup exsist and if not, fallback to current tab:

var url = $(this).val();
var win  = window.open(url);
/* Detectar posible bloqueo de popups */
if (win == null || typeof(win) == "undefined" || (win == null && win.outerWidth == 0) || (win != null && win.outerHeight == 0) || win.test == "undefined"){
                    window.location.href = url;
}else if (win){
    win.onload = function(){
    if (win.screenX === 0) {
            win.close();
    }
   };
}

Open a page in a new tab with JS

2 Answers2