tab - window.open javascript




Apri un URL in una nuova scheda(e non una nuova finestra) utilizzando JavaScript (18)

window.open non può aprire in modo affidabile i popup in una nuova scheda in tutti i browser

Browser diversi implementano il comportamento di window.open in modi diversi, specialmente per quanto riguarda le preferenze del browser di un utente. Non è possibile aspettarsi lo stesso comportamento per window.open essere vero su Internet Explorer, Firefox e Chrome, a causa dei diversi modi in cui gestiscono le preferenze del browser di un utente.

Ad esempio, gli utenti di Internet Explorer (11) possono scegliere di aprire i popup in una nuova finestra o una nuova scheda, non è possibile forzare gli utenti di Internet Explorer 11 ad aprire i popup in un certo modo attraverso window.open , come accennato nella risposta di Quentin .

Per quanto riguarda gli utenti di Firefox (29), l'utilizzo di window.open(url, '_blank') dipende dalle preferenze della scheda del browser, sebbene sia ancora possibile forzarli ad aprire i popup in una nuova finestra specificando una larghezza e un'altezza (vedere "Informazioni su Chrome? "Di seguito).

Dimostrazione

Vai alle impostazioni del tuo browser e configuralo per aprire i popup in una nuova finestra.

Internet Explorer (11)

Pagina di test

Dopo aver configurato Internet Explorer (11) per aprire i popup in una nuova finestra come mostrato sopra, usa la seguente pagina di test per testare window.open :

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

Osserva che i popup sono aperti in una nuova finestra, non in una nuova scheda.

Puoi anche testare quei frammenti sopra in Firefox (29) con la sua scheda impostata su nuove finestre e vedere gli stessi risultati.

Che dire di Chrome? Implementa window.open diverso da Internet Explorer (11) e Firefox (29).

Non sono sicuro al 100%, ma sembra che Chrome (versione 34.0.1847.131 m ) non abbia impostazioni che l'utente può utilizzare per scegliere se aprire o meno i popup in una nuova finestra o una nuova scheda (come Firefox e Internet Explorer hanno). Ho controllato la documentazione di Chrome per la gestione dei pop-up , ma non ha menzionato nulla su questo genere di cose.

Inoltre, ancora una volta, diversi browser sembrano implementare il comportamento di window.open diverso. In Chrome e Firefox, specificare una larghezza e un'altezza forzerà un popup, anche quando un utente ha impostato Firefox (29) per aprire nuove finestre in una nuova scheda (come menzionato nelle risposte a JavaScript aperte in una nuova finestra, non in una scheda ) :

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <code>window.open(url)</code>
    </button>
  </body>
</html>

Tuttavia, lo stesso frammento di codice sopra riportato aprirà sempre una nuova scheda in Internet Explorer 11 se gli utenti impostano le schede come preferenze del browser, nemmeno la specifica della larghezza e dell'altezza costringerà loro una nuova finestra popup.

Quindi il comportamento di window.open in Chrome sembra essere quello di aprire i popup in una nuova scheda quando viene utilizzato in un evento onclick , per aprirli in nuove finestre quando vengono utilizzati dalla console del browser ( come notato da altre persone ) e per aprirli in nuove finestre se specificato con larghezza e altezza.

Sommario

Browser diversi implementano il comportamento di window.open diverso rispetto alle preferenze del browser degli utenti. Non è possibile aspettarsi lo stesso comportamento per window.open essere vero su Internet Explorer, Firefox e Chrome, a causa dei diversi modi in cui gestiscono le preferenze del browser di un utente.

Letture aggiuntive

Sto cercando di aprire un URL in una nuova scheda, al contrario di una finestra popup. Ho visto domande correlate in cui le risposte avrebbero avuto un aspetto simile:

window.open(url,'_blank');
window.open(url);

Ma nessuno di loro ha funzionato per me, il browser ha comunque provato ad aprire una finestra popup.


C'è una risposta a questa domanda e non è no.

Ho trovato un facile lavoro in giro:

Passaggio 1: crea un collegamento invisibile:

<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>

Passaggio 2: fare clic su questo link a livello di codice:

document.getElementById("yourId").click();

Ecco qui! Funziona un fascino per me.


Che ne dici di creare un <a> con _blank come valore di attributo target e l' url come href , con display di stile: nascosto con un elemento child? Quindi aggiungere al DOM e quindi attivare l'evento click su un elemento children.

AGGIORNARE

Questo non funziona. Il browser impedisce il comportamento predefinito. Potrebbe essere attivato a livello di codice, ma non segue il comportamento predefinito.

Controlla e vedi di persona: http://jsfiddle.net/4S4ET/


Concordo un po 'con la persona che ha scritto (parafrasato qui): "Per un collegamento in una pagina Web esistente, il browser apre sempre il collegamento in una nuova scheda se la nuova pagina fa parte dello stesso sito Web di la pagina web esistente. " Per me, almeno, questa "regola generale" funziona con Chrome, Firefox, Opera, IE, Safari, SeaMonkey e Konqueror.

Ad ogni modo, c'è un modo meno complicato per sfruttare ciò che l'altra persona ha presentato. Supponendo che stiamo parlando del tuo sito web ("thissite.com" sotto), dove vuoi controllare cosa fa il browser, quindi, sotto, vuoi "specialpage.htm" per essere VUOTO, niente HTML in esso ( risparmia tempo inviando dati dal server!).

 var wnd, URL;  //global variables

 //specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); //get reference to just-opened page
 //if the "general rule" above is true, a new tab should have been opened.
 URL = "http://www.someothersite.com/desiredpage.htm";  //ultimate destination
 setTimeout(gotoURL(),200);  //wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { wnd.open(URL, "_self");  //replace the blank page, in the tab, with the desired page
   wnd.focus();             //when browser not set to automatically show newly-opened page, this MAY work
 }

In questo modo è simile alla soluzione di cui sopra ma implementato in modo diverso

.social_icon -> qualche classe con CSS

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>


 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });

Io uso il seguente e funziona molto bene !!!

window.open(url, '_blank').focus();

Nulla di ciò che può fare un autore può scegliere di aprire in una nuova scheda invece di una nuova finestra. È una preferenza dell'utente .

Il CSS3 ha proposto target-new , ma la specifica è stata abbandonata .

Il contrario non è vero; specificando le dimensioni per la finestra nel terzo argomento di window.open , è possibile attivare una nuova finestra quando la preferenza è per le schede.


O potresti semplicemente creare un elemento link e cliccarlo ...

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

Questo non dovrebbe essere bloccato da nessun blocco popup ... Si spera.


Per elaborare la risposta di Steven Spielberg, l'ho fatto in questo caso:

$('a').click(function() {
  $(this).attr('target', '_blank');
});

In questo modo, appena prima che il browser segua il collegamento, imposto l'attributo target, in modo che il link si apra in una nuova scheda o finestra ( dipende dalle impostazioni dell'utente ).


Puoi usare un trucco con il form :

$(function () {
    $('#btn').click(function () {
        openNewTab("http://.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

demo di jsFiddle


Questo potrebbe essere un trucco, ma in Firefox se si specifica un terzo parametro, 'fullscreen = yes', si apre una nuova finestra.

Per esempio,

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

Sembra che sovrascriva effettivamente le impostazioni del browser.


Se è qualcosa che stai cercando di caricare sull'elemento, prova a utilizzarlo. Al caricamento della pagina aggiungerà la proprietà di destinazione con l'attributo corretto.

$ (your_element_here) .prop ('target', '_blank');


Se vuoi solo aprire i link esterni (link che vanno ad altri siti) allora questo bit di JavaScript / jQuery funziona bene:

$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});

Specificare un obiettivo predefinito per tutti i collegamenti ipertestuali e i moduli su una pagina (non JavaScript):

<head>
  <base target="_blank">
</head>

Una fodera:

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

o

Con jQuery sto usando questo:

var url = "http://google.com";
$("<a>").attr("href", url).attr("target", "_blank")[0].click();

Crea un elemento virtuale, gli dà target="_blank" modo che si apra in una nuova scheda, gli dia un url corretto href e poi lo faccia clic.

E se vuoi, basandoti su quello puoi creare qualche funzione:

function openInNewTab(url) {
    $("<a>").attr("href", url).attr("target", "_blank")[0].click();
}

e quindi puoi usarlo come:

openInNewTab("http://google.com");

Per uno scenario non-jQuery , la funzione sarebbe simile a questa:

function openInNewTab(url) {
    var a = document.createElement("a");
    a.target = "_blank";
    a.href = url;
    a.click();
}

// And then
openInNewTab("http://google.com");

questo lavoro per me, solo prevenire l'evento, aggiungere l'url a un tag <a> quindi attivare l'evento click su quel tag .

Js
$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href',"http://someurl.com");
        $(this).trigger('click');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>

Questo non ha nulla a che fare con le impostazioni del browser se si sta tentando di aprire una nuova scheda da una funzione personalizzata.

In questa pagina, apri una console JavaScript e digita:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

E cercherà di aprire un popup indipendentemente dalle tue impostazioni, perché il "clic" deriva da un'azione personalizzata.

Per comportarti come un vero "clic del mouse" su un link, devi seguire il consiglio di @ spirinvladimir e crearlo davvero :

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

Ecco un esempio completo (non provarlo su jsFiddle o editor online simili, in quanto non ti consente di reindirizzare a pagine esterne da lì):

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>

Il browser aprirà sempre il collegamento in una nuova scheda se il collegamento si trova nello stesso dominio (sullo stesso sito Web). Se il collegamento è su un altro dominio, verrà aperto in una nuova scheda / finestra, in base alle impostazioni del browser.

Quindi, in base a questo, possiamo usare:

<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>

E aggiungi del codice jQuery:

jQuery(document).ready(function () {
    jQuery(".my-link").on("click",function(){
        var w = window.open('http://www.mywebsite.com','_blank');
        w.focus();
        w.location.href = jQuery(this).attr('rel');
        return false;
    });
});

Quindi, per prima cosa apri una nuova finestra sullo stesso sito web con _blank target (lo aprirà in una nuova scheda), quindi apri il sito web desiderato all'interno di quella nuova finestra.





javascript