javascript - Öppna en URL i en ny flik (och inte ett nytt fönster)

Jag försöker öppna en URL i en ny flik, istället för ett popup-fönster.

Jag har sett relaterade frågor där svaren skulle se ut ungefär så här:

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

Men ingen av dem fungerade för mig, webbläsaren försökte fortfarande öppna ett popup-fönster.

Svar #1

Det här är ett trick,

function openInNewTab(url) {
  window.open(url, '_blank').focus();
}

// Or just
window.open(url, '_blank').focus();

I de flesta fall bör detta ske direkt i onclick-hanteraren för länken för att förhindra popup-blockerare och standardbeteendet "nytt fönster". Du kan göra det på detta sätt, eller genom att lägga till en händelselyssnare på ditt DOM-objekt.

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

Referens: Öppna en URL i en ny flik med JavaScript

Svar #2

Ingenting en författare kan göra kan välja att öppnas i en ny flik istället för i ett nytt fönster; det är ett användarval. (Observera att standardinställningen för användare i de flesta webbläsare är nya flikar, så ett enkelt test på en webbläsare där den inställningen inte har ändrats kommer inte att visa detta.)

CSS3 föreslog target-new, men specifikationen övergavs.

Det motsatta är inte sant; genom att ange vissa fönsterfunktioner för fönstret i det tredje argumentet i window.open() kan du utlösa ett nytt fönster när preferensen är för flikar.

Svar #3

window.open() kommer inte att öppnas i en ny flik om det inte sker vid det faktiska klickhändelsen. I det givna exemplet öppnas URL:en vid det faktiska klickhändelsen. Detta kommer att fungera förutsatt att användaren har lämpliga inställningar i webbläsaren.

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });
</script>

På samma sätt, om du försöker göra ett Ajax-anrop inom klickfunktionen och vill öppna ett fönster vid framgång, se till att du gör Ajax-anropet med alternativet async : false inställt.

Svar #4

Detta skapar ett virtuellt a-element, ger det target="_blank", så att det öppnas i en ny flik, ger det den korrekta URL:en href och klickar sedan på det.

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    rel: 'noopener noreferrer',
    href: href,
  }).click();
}

Och sedan kan du använda det så här:

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

Viktig notering:

Detta måste kallas under den så kallade 'trusted event'-callbacken—t.ex. under klickhändelsen (inte nödvändigt i en callback-funktion direkt, men under en klickåtgärd). Annars kommer öppningen av en ny sida att blockeras av webbläsaren.

Om du anropar det manuellt vid något slumpmässigt tillfälle (t.ex. inom ett intervall eller efter serverns svar), kan det blockeras av webbläsaren (vilket är logiskt eftersom det skulle vara en säkerhetsrisk och kan leda till dålig användarupplevelse).

Svar #5

Webbläsare har olika beteenden för hur de hanterar window.open

Du kan inte förvänta dig att beteendet är detsamma i alla webbläsare. window.open öppnar inte pålitligt pop-ups i en ny flik i alla webbläsare, och det beror också på användarens inställningar.

I Internet Explorer (11) kan användare till exempel välja att öppna popup-fönster i ett nytt fönster eller en ny flik. Du kan inte tvinga Internet Explorer 11 att öppna popup-fönster på ett visst sätt genom window.open, som antytts i Quentins svar.

När det gäller Firefox (29) beror beteendet för window.open(url, ''_blank'') på webbläsarens flikinställningar, även om du fortfarande kan tvinga den att öppna URL:er i ett popup-fönster genom att specificera en bredd och höjd (se avsnittet "Chrome" nedan).

Internet Explorer (11)

Du kan ställa in Internet Explorer så att popup-fönster öppnas i ett nytt fönster:

Efter att ha gjort det, försök köra window.open(url) och window.open(url, '_blank'). Observera att sidorna öppnas i ett nytt fönster, inte en ny flik.

Firefox (29)

Du kan också ställa in flikinställningen för att öppna nya fönster och se samma resultat.

Chrome

Det verkar som att Chrome (version 34) inte har några inställningar för att välja att öppna popup-fönster i ett nytt fönster eller en ny flik. Ändå diskuteras vissa sätt att göra det (redigera registret) i denna fråga.

I Chrome och Firefox kommer specificering av en bredd och höjd att tvinga fram ett popup-fönster (som nämnts i svaren här), även när en användare har ställt in Firefox att öppna nya fönster i en ny flik

let url = 'https://stackoverflow.com'
window.open(url, '', 'width=400, height=400')

Men i Internet Explorer 11 kommer samma kod alltid att öppna en länk i en ny flik om tabs väljs i webbläsarens inställningar, att specificera en bredd och höjd kommer inte att tvinga fram ett nytt fönsterpopup.

I Chrome verkar det som att window.open öppnar en ny flik när det används i ett onclick-händelse, och ett nytt fönster när det används från webbläsarkonsolen (som noterats av andra), och popup-fönster öppnas när en bredd och höjd anges.

Ytterligare läsning: window.open-dokumentation.

Svar #6

Om du använder window.open(url, '_blank') kommer det att blockeras (popup-blockerare) i Chrome.

Prova detta:

//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

Med ren JavaScript,

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};

Svar #7

För att utveckla Steven Spielbergs svar gjorde jag detta i ett sådant fall:

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

På det här sättet, precis innan webbläsaren följer länken, sätter jag målattributet, så att länken öppnas i en ny flik eller ett nytt fönster (beroende på användarens inställningar).

Exempel med en rad i jQuery:

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

Detta kan också uppnås enbart med hjälp av webbläsarens inbyggda DOM-API:er:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();

Svar #8

Jag använder följande och det fungerar väldigt bra!

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

Svar #9

Jag tror att du inte kan kontrollera detta. Om användaren har ställt in sin webbläsare att öppna länkar i ett nytt fönster, kan du inte tvinga detta att öppna länkar i en ny flik.

JavaScript öppna i ett nytt fönster, inte flik

Svar #10

Om URL:en ska öppnas i en ny flik eller ett nytt fönster styrs faktiskt av användarens webbläsarinställningar. Det finns inget sätt att åsidosätta det i JavaScript.

window.open() beter sig olika beroende på hur det används. Om det anropas som en direkt följd av en användaråtgärd, låt oss säga ett knappklick, borde det fungera bra och öppna en ny flik (eller ett nytt fönster):

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

Men om du försöker öppna en ny flik från en AJAX-förfrågningscallback, kommer webbläsaren att blockera det eftersom det inte var en direkt användaråtgärd.

För att kringgå popup-blockeraren och öppna en ny flik från en callback, här är ett litet trick:

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});

Svar #11

En intressant fakta är att den nya fliken inte kan öppnas om åtgärden inte initieras av användaren (till exempel genom att klicka på en knapp) eller om den är asynkron, till exempel kommer detta inte att öppnas i en ny flik:

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

Men detta kan öppnas i en ny flik, beroende på webbläsarens inställningar:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});

Svar #12

Att bara utelämna strWindowFeatures-parametrarna öppnar en ny flik, om inte webbläsarinställningen åsidosätter det (webbläsarinställningar går före JavaScript).

Nytt fönster

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

Ny flik

var myWin = window.open(strUrl, strWindowName);

-- eller --

var myWin = window.open(strUrl);

Svar #13

Detta har inget att göra med webbläsarinställningar om du försöker öppna en ny flik från en anpassad funktion.

På denna sida, öppna en JavaScript-konsol och skriv:

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

Och det kommer att försöka öppna ett popup-fönster oavsett dina inställningar, eftersom 'klicket' kommer från en anpassad åtgärd.

För att bete dig som ett faktiskt 'musklick' på en länk, behöver du följa spirinvladimirs råd och verkligen skapa det:

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'))));

Här är ett komplett exempel (försök inte med det på jsFiddle eller liknande online-redigerare, eftersom det inte kommer att tillåta dig att omdirigera till externa sidor därifrån):

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

Svar #14

function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}

Svar #15

(function(a) {
    document.body.appendChild(a);
    a.setAttribute('href', location.href);
    a.dispatchEvent((function(e) {
        e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
        return e
    }(document.createEvent('MouseEvents'))))
}(document.createElement('a')))

Svar #16

Du kan använda ett trick med form:

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

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

jsFiddle-demonstration

Svar #17

Använd inte target="_blank"

Använd alltid ett specifikt namn för det fönstret, i mitt fall meaningfulName. I detta fall sparar du processorresurser:

button.addEventListener('click', () => {
    window.open('https://google.com', 'meaningfulName')
})

På detta sätt, när du till exempel klickar 10 gånger på en knapp, kommer webbläsaren alltid att rendera om den i en ny flik, istället för att öppna den i 10 olika flikar, vilket skulle använda mycket mer resurser.

Du kan läsa mer om detta på MDN.