Chrome, Javascript, window.open w nowej karcie

110

W Chrome otwiera się to w nowej karcie:

<button onclick="window.open('newpage.html', '_blank')" />

to otwiera się w nowym oknie (ale chciałbym, aby otworzyło się również w nowej karcie:

<script language="javascript">
  window.open('newpage.html', '_blank');
</script>

Czy jest to wykonalne?

Andrzej
źródło
2
Czy jesteś pewien, co potwierdzasz? Oba fragmenty mają ten sam wynik.
Denys Séguret
1
To, czy okno otwiera się na karcie, czy w nowym oknie, zależy od lokalnej przeglądarki i tego, jak użytkownik konfiguruje przeglądarkę - nie jest to coś, co możesz określić w javascript.
jfriend00

Odpowiedzi:

150

Nie możesz tego bezpośrednio kontrolować, ponieważ jest to opcja kontrolowana przez użytkowników Internet Explorera.

Otwieranie stron za pomocą Window.open z inną nazwą okna otworzy się w nowym oknie przeglądarki, takim jak wyskakujące okienko, LUB otworzy się w nowej karcie, jeśli użytkownik skonfigurował przeglądarkę tak, aby to zrobić.

EDYTOWAĆ:

Bardziej szczegółowe wyjaśnienie:

1. W nowoczesnych przeglądarkach window.open otworzy się w nowej karcie, a nie w wyskakującym okienku.

2. Możesz zmusić przeglądarkę do używania nowego okna („wyskakującego okienka”), określając opcje w trzecim parametrze

3. Jeśli wywołanie window.open nie było częścią zdarzenia zainicjowanego przez użytkownika, zostanie otwarte w nowym oknie.

4. „Zdarzenie inicjowane przez użytkownika” nie musi mieć tego samego wywołania funkcji - ale musi pochodzić z funkcji wywoływanej przez kliknięcie przez użytkownika

5. Jeśli zdarzenie zainicjowane przez użytkownika deleguje lub odracza wywołanie funkcji (w detektorze zdarzeń lub delegacie niezwiązanym ze zdarzeniem kliknięcia lub przy użyciu na przykład setTimeout), traci status „zainicjowany przez użytkownika”

6. Niektóre programy do blokowania wyskakujących okienek zezwalają na okna otwierane ze zdarzeń zainicjowanych przez użytkownika, ale nie pozwalają na otwieranie okien w inny sposób.

7. Jeśli którekolwiek wyskakujące okienka jest zablokowane, te, na które normalnie zezwala blokujący (poprzez zdarzenia inicjowane przez użytkownika), będą czasami również blokowane. Kilka przykładów…

Wymuszanie otwierania okna w nowej instancji przeglądarki zamiast w nowej karcie:

window.open('page.php', '', 'width=1000');

Poniższe zdarzenie kwalifikowałoby się jako zdarzenie inicjowane przez użytkownika, mimo że wywołuje inną funkcję:

function o(){
  window.open('page.php');
}
$('button').addEvent('click', o);

Poniższe zdarzenia nie kwalifikują się jako zdarzenie inicjowane przez użytkownika, ponieważ setTimeout je odracza:

function g(){
  setTimeout(o, 1);
}
function o(){
  window.open('page.php');
}
$('button').addEvent('click', g);
Prakash Chennupati
źródło
2
Chcę tylko dodać, że testując w Chrome i FF odkryłem, że użycie window.open w tym, co określasz jako „zdarzenie inicjowane przez użytkownika”, zachowuje domyślną akcję przeglądarki. Rozumiem przez to, że jeśli w Chrome przytrzymasz Shift na chrome i klikniesz pojawi się nowe okno przeglądarki, jeśli przytrzymasz ctrl (lub naciśniesz środkowy przycisk myszy), nowa karta otworzy się w tle. Co jest bardzo miłe, możesz zrobić kilka rzeczy bez konieczności umieszczania wszędzie znaczników kotwicy.
Hoffmann
3
„Jeśli wywołanie window.open nie było częścią zdarzenia zainicjowanego przez użytkownika, zostanie otwarte w nowym oknie”. Nie, prawie na pewno w ogóle się nie otworzy.
TJ Crowder
3
Od 29.09.2014 najnowsze przeglądarki Firefox ESR i IE 11 otwierają łącza _blank lub window.open w nowym oknie, gdy wywołania js używają _blank jako nazwy okna. Obecny Chrome nie jest taki prosty. Testowałem otwieranie nowego okna, przechodząc w górę, w lewo, szerokość, wysokość, pasek narzędzi, lokalizację, katalogi, stan, pasek menu, paski przewijania i zmienny rozmiar oraz pomijając każdy z nich po kolei. Chrome otworzył je wszystkie w nowej karcie, z wyjątkiem sytuacji, gdy pominięto stan, pasek menu lub paski przewijania. Wydaje się to tak arbitralne, że trudno w to uwierzyć, ale empirycznie tak właśnie się stało. Przykład tutaj: jsbin.com/mobiyeqojaha/1
enigment
34

Czasami przydatne jest wymuszenie użycia karty, jeśli użytkownik to lubi. Jak stwierdził Prakash powyżej, czasami jest to podyktowane użyciem zdarzenia niezainicjowanego przez użytkownika, ale istnieją sposoby obejścia tego.

Na przykład:

$("#theButton").button().click( function(event) {
   $.post( url, data )
   .always( function( response ) {
      window.open( newurl + response, '_blank' );
   } );
} );

zawsze otwiera „nowy adres URL” w nowym oknie przeglądarki, ponieważ funkcja „zawsze” nie jest uważana za inicjowaną przez użytkownika. Jeśli jednak to zrobimy:

$("#theButton").button().click( function(event) {
   var newtab = window.open( '', '_blank' );
   $.post( url, data )
   .always( function( response ) {
      newtab.location = newurl + response;
   } );
} );

otwieramy nowe okno przeglądarki lub tworzymy nową kartę, zgodnie z preferencjami użytkownika w kliknięciu przycisku, który jest zainicjowany przez użytkownika. Następnie po powrocie z postu AJAX ustawiamy lokalizację na żądany adres URL. Voila, wymuszamy korzystanie z karty, jeśli użytkownik to lubi.

Frank A Tinker
źródło
Zauważyłem, że jeśli masz ustawiony punkt przerwania w chrome na window.open, to przeglądarka otwiera nowe okno. Pozwolenie, by kod się nie zepsuł, wydaje się skutkować otwarciem nowej karty.
skinnybrit51
Jest to obejście OK, chyba że plik window.open i wynik działania funkcji zajmuje około 5/6/7 sekund. Zastanów się, czy funkcja publikuje dane na serwerze, który generuje plik PDF, co zajmuje 10 sekund. Okno window.open do pustej karty jest natychmiastowe, a użytkownik wpatruje się w pustą kartę przez 10 sekund, aż w magiczny sposób zostanie zapełniona. Wciąż na iOS jest to jedyne rozwiązanie.
Kevin Brown
11

W tej chwili (Chrome 39) używam tego kodu, aby otworzyć nową kartę:

window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');

Oczywiście może się to zmienić w przyszłych wersjach Chrome.

Używanie tego jest złym pomysłem, jeśli nie możesz kontrolować przeglądarki używanej przez użytkowników. Może nie działać w przyszłych wersjach lub z innymi ustawieniami.

Nico Wiedemann
źródło
Zgodnie z komentarzem jfriend00, sposób, w jaki użytkownik konfiguruje przeglądarkę, określa sposób otwierania nowych okien, a nie kod.
Lee Taylor
Zgadzam się z Tobą, że poleganie na takim rozwiązaniu to zły pomysł, jeśli nie możesz kontrolować swojego otoczenia. Ale są sytuacje, w których jest to możliwe (na przykład używam go w aplikacji, która jest dostarczana z własnym przenośnym Chrome). Aby to wyjaśnić, zredagowałem odpowiedź.
Nico Wiedemann
2
Dla tych, którzy się zastanawiają, uruchomienie tego fragmentu kodu nie działa z powodu tego błędu:VM646 js:12 Blocked opening 'http://www.stackoverflow.com/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
Benjamin Crouzier
6

Spowoduje to otwarcie linku w nowej karcie w przeglądarce Chrome i Firefox oraz prawdopodobnie w innych przeglądarkach, których nie testowałem:

var popup  = $window.open("about:blank", "_blank"); // the about:blank is to please Chrome, and _blank to please Firefox
popup.location = 'newpage.html';

Zasadniczo otwiera nową pustą kartę, a następnie ustawia lokalizację tej pustej karty. Uważaj, jest to rodzaj włamania, ponieważ zachowanie karty / okna przeglądarki jest tak naprawdę domeną, odpowiedzialnością i wyborem przeglądarki i użytkownika.

Druga linia może zostać wywołana w wywołaniu zwrotnym (na przykład po wykonaniu jakiegoś żądania AJAX), ale wtedy przeglądarka nie rozpozna tego jako zdarzenia kliknięcia zainicjowanego przez użytkownika i może zablokować wyskakujące okienko.

Magne
źródło
1
$windowjest po prostu sposobem używania AngularJS window. Możesz po prostu użyć windowzamiast tego. Więcej informacji: docs.angularjs.org/api/ng/service/$window
Magne
3

Przejrzyste mini rozwiązanie $('<form action="http://samedomainurl.com/" target="_blank"></form>').submit()

Serhii Matrunchyk
źródło
0

Możesz użyć tego kodu, aby otworzyć w nowej karcie.

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

Mam to ze stackoverflow ...

Dilip Rajkumar
źródło
1
To działa, ale tylko wtedy, gdy jesteś w module obsługi kliknięć użytkownika. W przeciwnym razie otwiera nowe okno (ale Firefox przynajmniej zablokuje cię, dopóki użytkownik na to nie pozwoli).
djsmith
@djsmith, używam tego ... i napotykam problem tylko w IE7. Jeśli masz jakieś inne rozwiązanie, zasugeruj ... Dziękuję ..
Dilip Rajkumar
-2

Najlepszy sposób, w jaki używam:

1- dodaj link do swojego html:

<a id="linkDynamic" target="_blank" href="#"></a>

2- dodaj funkcję JS:

function OpenNewTab(href)
{
    document.getElementById('linkDynamic').href = href;
    document.getElementById('linkDynamic').click();
}

3- Po prostu wywołaj funkcję OpenNewTab z żądanym linkiem

Mohammad Shraim
źródło