Pytanie Otwórz adres URL w nowej karcie (a nie w nowym oknie), używając JavaScript


Próbuję otworzyć URL w nowej karcie, w przeciwieństwie do okna wyskakującego. Widziałem powiązane pytania, w których odpowiedzi wyglądałyby tak:

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

Ale żaden z nich nie działał dla mnie, przeglądarka wciąż próbowała otworzyć okno wyskakujące.


1594
2018-02-05 15:52


pochodzenie


Zazwyczaj jest to kwestia preferencji. Niektórzy ludzie lubią okna (i zaciekle chronią to zachowanie), niektóre karty (i ostro chronią to zachowanie). Więc pokonasz zachowanie, które jest ogólnie uważane za kwestię gustu, a nie design. - Jared Farrish
JavaScript nie wie nic o przeglądarce i kartach w stosunku do okien, więc to naprawdę zależy od przeglądarki, aby zdecydować, jak otworzyć nowe okno. - Andrey
Jak skonfigurować Chrome, by wyświetlał go w nowej karcie, a nie w wyskakującym okienku? - Mark F
Gmail robi to w jakiś sposób, przynajmniej w Chrome. Shift + kliknij wiersz z wiadomościami e-mail, a otworzysz tę wiadomość w nowym oknie. Ctrl + kliknięcie otwiera się w nowej karcie. Jedyny problem: przekopywanie się do zaciemnionego kodu gmaila to PITA - Sergio
@Sergio, to domyślne zachowanie przeglądarki dla każdego linku. (Przynajmniej Chrome i Firefox.) Nie ma nic wspólnego z Gmailem. - Qtax


Odpowiedzi:


Nic, co może zrobić autor, może otworzyć nową kartę zamiast nowego okna. To jest preferencje użytkownika.

Zaproponowano CSS3 cel-nowy, ale specyfikacja została porzucona.

The rewers to nie jest prawda; przez określenie wymiarów okna w trzecim argumencie window.open, możesz wywołać nowe okno, gdy preferencja dotyczy kart.


699
2018-02-05 15:53



@JacksonGariety - i jak to przesłoni preferencje przeglądarki dotyczące okna lub karty? - Quentin
@AliHaideri JavaScript nie ma nic wspólnego z otwarciem nowej karty / okna. Wszystko zależy od ustawień przeglądarki. Za pomocą window.open mówi przeglądarce, aby otworzyła coś nowego, a następnie przeglądarka otwiera to, co zostało wybrane w jego ustawieniach - karta lub okno. W przeglądanych przeglądarkach zmień ustawienia tak, aby otwierały się w nowym oknie zamiast na karcie, a zobaczysz, że rozwiązania innych są błędne. - Ian
Nie da się zrobić dwóch rzeczy, które marnują czas innych ludzi, a nie mówią im coś. (1) Mówienie im czegoś, czego nie da się zrobić mogą będzie zrobione. (2) Milczenie i pozwolenie im na szukanie sposobu na zrobienie czegoś, czego nie da się zrobić. - Quentin
@Cupcake - Dokumentacja zwykle nie zajmuje się opisywaniem funkcji, które nie istnieją. evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/... - Quentin
@Neel - ponieważ zwięźle trafia na temat na temat, o którym wielu ludzi chce wiedzieć. - Quentin


To jest podstęp,

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

W większości przypadków powinno to nastąpić bezpośrednio w onclick obsługi dla łącza, aby zapobiec blokowaniu wyskakujących okienek i domyślnemu zachowaniu "nowego okna". Możesz to zrobić w ten sposób lub dodając do niego detektor zdarzeń DOM obiekt.

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

http://www.tutsplanet.com/open-url-new-tab-using-javascript-196/


1263
2017-07-08 14:49



Nie działa. Otrzymałem wiadomość po prawej stronie paska adresu: Pop-up zablokowany. Potem pozwoliłem na wyskakujące okienka. I voila, otwiera się w okienku, a nie patka! Chrome 22.0.1229.94 na OS X Lion. - nalply
Myślę, że powodem, dla którego tak wielu ludzi ma problemy, jest to, że nie implementują go właściwie (chociaż nie rozumiem.) Testowane w wanilii: Chrome, IE, FF, SeaMonkey, Safari i Opera. Działa jak marzenie. - b1nary.atr0phy
@Dhaval Zmień ustawienia w swoich przeglądarkach. To, czy jest otwarte w karcie czy w oknie, zależy od ustawień przeglądarki. Nic nie możesz zrobić, dzwoniąc window.open (lub dowolny Javascript) do wyboru w jaki sposób aby otworzyć nowe okno / kartę. - Ian
@ b1naryatr0phy To dlatego, że właściwie go nie przetestowałeś. Zmień ustawienia w swoich przeglądarkach. To, czy jest otwarte w karcie czy w oknie, zależy od ustawień przeglądarki. Nic nie możesz zrobić, wywołując window.open (lub dowolny Javascript), aby wybrać sposób otwierania nowego okna / karty. - Ian
@duke Czy możesz zaoferować choćby jeden przykład przeglądarki, w której za pomocą kodu OP nowa strona zostanie otwarta w nowym oknie, a twoja otworzy się w nowej karcie? Jak dotąd nie oferowałeś każdy przykład, w którym ten kod działa, a inni oferują wiele, w których (twierdzą), że się nie powiedzie. - Mark Amery


window.open() nie otworzy się w nowej karcie, jeśli nie dzieje się w przypadku rzeczywistego kliknięcia. W podanym przykładzie adres URL jest otwierany w rzeczywistym zdarzeniu kliknięcia. Będzie działać, pod warunkiem, że użytkownik ma odpowiednie ustawienia w przeglądarce.

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

Podobnie, jeśli próbujesz wykonać połączenie Ajax w ramach funkcji kliknięcia i chcesz otworzyć okno na sukces, upewnij się, że wykonujesz połączenie Ajax z async : false zestaw opcji.


316
2017-10-31 13:15



Byłoby miło zaznaczyć to jako PRAWIDŁOWĄ odpowiedź. Moje testy z Chrome v26 (Windows) potwierdzają, że jeśli kod znajduje się w obsługiwanym kliknięciem przycisku, otwiera się nowa karta i jeśli kod jest wywoływany programowo, np. z konsoli, a następnie otwiera nowe okno. - CyberFonic
@CyberFonic Nie ma powodu, aby to robić, ponieważ nie jest to właściwa odpowiedź. Nie wpływa to na sposób otwierania nowej karty / przeglądarki. Nie możesz kontrolować tego z JavaScript. Określają to ustawienia przeglądarki. - Ian
@PaulBrown Ta odpowiedź nie różni się niczym od innych. Wszyscy mówią, że używają window.open. Drugi parametr "_blank" nic nie zmienia. Dlatego nie ma tu żadnej różnicy. I fakt, że twierdzą "window.open() nie otworzy się w nowej karcie, jeśli nie dzieje się to na rzeczywistym wydarzeniu kliknięcia. "jest również błędne. Ustawienia w przeglądarce są powodem do tego, aby coś się stało, a nie do kodu Javascript - Ian
@PaulBrown Nie wiem, dlaczego nie zaakceptujesz faktu, że nie możesz tego kontrolować. Wszystko, co zrobił CyberFonic, wyjaśniło / udowodniło, że to kolejna niespójność między przeglądarkami i pokazuje, że jest to niebezpieczne window.open połączenia różnią się od bezpiecznych ..ON CHROME. Właśnie przetestowałem to samo na Firefoxie i IE i oba otwierają się w nowej karcie. Oto przykład, dzięki któremu możesz przetestować swoje małe serce: jsfiddle.net/gEuMK . Dlaczego popierasz rozwiązanie, które jest niespójne między przeglądarkami i tylko "działa" na jednym, nawet jeśli nie możesz kontrolować, co się dzieje - prawdziwe, bezpieczne wydarzenie czy przypadkowe / niepewne? - Ian
@PaulBrown Nie, nie ma. Jest Nie gwarancja otwarcia karty (z punktu widzenia JavaScriptu). Karty otwierają się dla mnie, ponieważ domyślne ustawienia przeglądarki są otwierane w karcie. Działa dla Ciebie i innych, ponieważ Twoje ustawienia domyślne są prawdopodobnie takie same. Pytanie brzmiało "Jak otworzyć URL w nowej karcie". To i wszystkie inne pytania z kodem odpowiadają "Jak otworzyć adres URL na podstawie domyślnych ustawień przeglądarki". I dla mnie OP chce pełna kontrola. Jeśli chcą, aby coś się wydarzyło, odpowiedź powinna robić to się stało. Te odpowiedzi moc spraw, żeby to się stało - Ian


window.open Nie można niezawodnie otwierać wyskakujących okienek w nowej karcie we wszystkich przeglądarkach

Różne przeglądarki implementują zachowanie  window.open  na różne sposoby, zwłaszcza w odniesieniu do preferencji użytkownika przeglądarki. Nie możesz oczekiwać tego samego zachowania dla window.open być prawdziwe we wszystkich przeglądarkach Internet Explorer, Firefox i Chrome ze względu na różne sposoby, w jakie radzą sobie z ustawieniami przeglądarki użytkownika.

Na przykład użytkownicy przeglądarki Internet Explorer (11) mogą wybrać otwieranie wyskakujących okienek w nowym oknie lub nowej karcie, nie można zmusić użytkowników przeglądarki Internet Explorer 11 do otwierania wyskakujących okienek w określony sposób  window.open, jak nawiązywał do w Odpowiedź Quentina.

Podobnie jak w przypadku użytkowników Firefox (29), używając window.open(url, '_blank')  zależy od preferencji zakładki przeglądarki, chociaż nadal możesz zmusić ich do otwarcia okien podręcznych w nowym oknie, określając szerokość i wysokość (zobacz sekcję "Co z Chrome?" poniżej).

Demonstracja

Przejdź do ustawień przeglądarki i skonfiguruj ją, aby otwierać wyskakujące okna w nowym oknie.

Internet Explorer (11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

Strona testowa

Po skonfigurowaniu przeglądarki Internet Explorer (11), aby otworzyć wyskakujące okienka w nowym oknie, jak pokazano powyżej, użyj poniższej strony testowej do przetestowania 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>

Zwróć uwagę, że wyskakujące okienka są otwarte w nowym oknie, a nie nowej karcie.

Możesz także przetestować powyższe urywki w Firefoksie (29), ustawiając kartę na nowe okna i wyświetlając te same wyniki.

Co z Chrome? To narzędzie window.open Inaczej niż Internet Explorer (11) i Firefox (29).

Nie jestem w 100% pewny, ale wygląda na Chrome (wersja 34.0.1847.131 m) nie ma żadnych ustawień, za pomocą których użytkownik może decydować, czy otworzyć wyskakujące okienka w nowym oknie, czy o nową kartę (np. Firefox i Internet Explorer). sprawdziłem dokumentacja Chrome do zarządzania pop-upami, ale nic o tym nie wspomniało.

Również, po raz kolejny różne przeglądarki wydają się implementować zachowanie  window.open  różnie. W przeglądarce Chrome i Firefox określenie szerokości i wysokości wymusi wyskakujące okienko, nawet jeśli użytkownik ustawił Firefoksa (29), aby otworzyć nowe okna w nowej karcie (jak wspomniano w odpowiedziach na JavaScript otwiera się w nowym oknie, a nie na karcie):

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

Jednak ten sam fragment kodu powyżej zawsze otworzy nową kartę w przeglądarce Internet Explorer 11, jeśli użytkownicy ustawiają karty jako preferencje przeglądarki, nawet podanie szerokości i wysokości wymusi dla nich nowe okno popup.

Tak więc zachowanie window.open w Chrome wydaje się otwierać wyskakujące okienka w nowej karcie, gdy jest używana w onclick zdarzenie, aby otworzyć je w nowych oknach po użyciu z konsoli przeglądarki (jak zauważyli inni ludzie) i otworzyć je w nowych oknach, gdy zostaną określone z szerokością i wysokością.

Podsumowanie

Różne przeglądarki implementują zachowanie  window.open  inaczej w odniesieniu do preferencji przeglądarki użytkownika. Nie możesz oczekiwać tego samego zachowania dla window.open być prawdziwe we wszystkich przeglądarkach Internet Explorer, Firefox i Chrome ze względu na różne sposoby, w jakie radzą sobie z ustawieniami przeglądarki użytkownika.

Dodatkowe czytanie


224
2018-05-01 19:42



Nie odpowiedziałeś na to pytanie, udowodniłeś, że window.open jest niespójny. - BentOnCoding


Jedna linijka:

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

lub

Z jQuery Używam tego:

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

Tworzy wirtualny a element, daje to target="_blank" więc otwiera się w nowej karcie, nadaje jej właściwy url  href a następnie klika.

A jeśli chcesz, na podstawie tego możesz stworzyć jakąś funkcję:

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

a następnie możesz użyć go jak:

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

Dla non-jQuery scenariusz, funkcja wyglądałaby następująco:

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

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

136
2018-02-06 20:35



Dziękuję Ci. Twój czysty JS ma brakujący element - jak pisał Luke Alderton (patrz poniżej), musisz dołączyć utworzony element do treści dokumentu, w kodzie jest zawieszony w pustce przynajmniej w Firefoksie 37 nie robi nic . - greenoldman
@mcginniwa Jakakolwiek akcja taka jak ta - jeśli nie zostanie wywołana przez akcję użytkownika, taką jak kliknięcie myszą, wyłączy blokowanie wyskakujących okienek. Wyobraź sobie, że możesz otworzyć dowolny adres URL z JavaScript bez działania użytkownika - byłoby to dość niebezpieczne. Jeśli umieścisz ten kod w wydarzeniu takim jak funkcja kliknięcia - będzie działał dobrze - to samo dotyczy wszystkich proponowanych rozwiązań tutaj. - pie6k
To była moja pierwsza myśl. Prawdopodobnie najlepiej byłoby pomyśleć o blokowaniu wyskakujących okienek. - Arg0n
Możesz uprościć swój kod w następujący sposób: $('<a />',{'href': url, 'target', '_blank'}).get(0).click(); - shaedrich
@shaedrich zainspirowany Twoją snippedą dodaną nie-jQuerylową linią: Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click(); - pie6k


Aby rozwinąć odpowiedź Stevena Spielberga, zrobiłem to w takim przypadku:

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

W ten sposób, tuż przed przeglądarką, po kliknięciu linku ustawiam atrybut docelowy, dzięki czemu link otworzy się w nowej karcie lub oknie (zależy od ustawień użytkownika).


55
2018-04-05 15:02





Jeśli użyjesz window.open(url, '_blank'), zostanie zablokowany (blokowanie wyskakujących okienek) w Chrome.

Spróbuj tego:

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

51
2018-05-28 16:43



Właśnie to oczekiwałem jako zaakceptowaną odpowiedź, czy istnieje powód, aby nie używać tej opcji? Testowałem w Chrome, Safari i IE11 i działa dobrze w tych przeglądarkach, ale nie mam pojęcia o telefonii komórkowej i LTE (IE10) - cloying
To może otworzyć się w nowym oknie. To może otworzyć się w nowej karcie. Którego nie znajduje się pod kontrolą autora strony. Ten kod jest taki sam jak kod w pytaniu, które zdaniem OP nie działa dla nich. - Quentin
Dzięki temu działa dobrze, ale ustawienia przeglądarki są wymagane do obsługi wyskakujących okienek. - chetan
Naprawdę uważam, że może to być dobre rozwiązanie, ponieważ działa zgodnie z oczekiwaniami, otwierając nową kartę i działa dobrze nawet z włączonymi blokerami reklam lub blokadami wyskakujących okienek - LucioB
To nie działa zarówno w FF i chrome. - Faisal Mq


Używam poniższych i działa bardzo dobrze !!!

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

29
2018-03-11 11:51



powoduje pojawienie się wyskakujących okienek
-1. To jest źle. Wezwanie do .focus() nie ma wpływu na to, czy nowa strona jest otwierana w oknie lub karcie, ponieważ odbywa się po .open() zadzwoń, a window.open(url, '_blank') jest dosłownie dokładnie kod, który osoba pytająca zadała w pytaniu i który on i wiele innych plakatów tutaj wyjaśnił, nie działa. - Mark Amery
Nie. Może się to otworzyć w nowej karcie lub nowym oknie zgodnie z preferencjami użytkownika. Pytanie brzmi, jak upewnić się, że otwiera się w nowej karcie, a nie w nowym oknie. - Quentin


Ciekawostką jest to, że nowej karty nie można otworzyć, jeśli akcja nie zostanie wywołana przez użytkownika (kliknięcie przycisku lub czegoś) lub jeśli jest asynchroniczna, na przykład NIE otworzy się w nowej karcie:

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

Ale może się to otworzyć w nowej karcie, w zależności od ustawień przeglądarki:

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

14
2017-10-18 12:35



Okazało się to przydatne, więc przynajmniej niektóre przeglądarki (z ustawieniami domyślnymi) otwierałyby kartę bez ostrzeżenia o blokadach wyskakujących okienek. - Populus
To jest blokowane jako popup w Firefox 28, Chrome 34b i Safari 7.0.2, wszystkie ustawienia zapasów. :( - Steve Meisner
+1 To był dokładnie mój problem asynchroniczny: false pomaga, ale jest niebezpieczny - Mina Gabriel
Czy istnieje obejście tego problemu? - Struggler
"nowej karty nie można otworzyć, jeśli akcja nie zostanie wywołana przez użytkownika (kliknięcie przycisku lub czegoś) lub jeśli jest asynchroniczna" - prawda w Chrome, ale nie w przypadku wszystkich przeglądarek. Zapisać <script>open('http://google.com')</script> do a .html plik i otwórz go w świeżej instalacji najnowszej wersji Firefoksa; zauważysz, że Firefox szczęśliwie otwiera Google w nowej karcie (być może po tym, jak powiesz mu, aby zezwolił na wyskakujące okienka), a nie nowe okno. - Mark Amery


Myślę, że nie możesz tego kontrolować. Jeśli użytkownik skonfigurował przeglądarkę tak, aby otwierał łącza w nowym oknie, nie można tego wymusić, aby otworzyć łącza w nowej karcie.

JavaScript otwiera się w nowym oknie, a nie na karcie


13
2018-02-05 15:55