Otwórz adres URL w nowej karcie (a nie w nowym oknie)

2102

Próbuję otworzyć adres URL w nowej karcie, a nie w wyskakującym oknie.

Widziałem powiązane pytania, w których odpowiedzi wyglądałyby mniej więcej tak:

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

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

javascript znak
źródło
85
Zazwyczaj jest to kwestia preferencji. Niektóre osoby lubią okna (i zaciekle chronią to zachowanie), niektóre karty (i zaciekle chronią to zachowanie). Pokonałbyś więc zachowanie, które jest ogólnie uważane za kwestię gustu, a nie projektu.
Jared Farrish,
42
JavaScript nie wie nic o przeglądarce i kartach w porównaniu z oknami, więc to od przeglądarki zależy, jak otworzyć nowe okno.
Andrey
3
Jak skonfigurować Chrome, aby wyświetlał go w nowej karcie zamiast w wyskakującym okienku?
Mark
8
Gmail robi to jakoś, przynajmniej w Chrome. Shift + kliknij wiersz wiadomości e-mail i otworzysz tę wiadomość w nowym oknie. Ctrl + kliknięcie i otworzysz go w nowej karcie. Jedyny problem: kopanie w zaciemnionym kodzie Gmaila to PITA
Sergio
48
@Sergio, jest to domyślne zachowanie przeglądarki dla każdego linku. (Przynajmniej dla Chrome i Firefox.) Nie ma nic wspólnego z Gmailem.
Qtax,

Odpowiedzi:

929

Nic, co autor może zrobić, nie może otworzyć w nowej karcie zamiast w nowym oknie; jest to preferencja użytkownika . (Należy pamiętać, że domyślna preferencja użytkownika w większości przeglądarek dotyczy nowych kart, więc trywialny test w przeglądarce, w której preferencje te nie zostały zmienione, nie wykaże tego).

CSS3 zaproponował nowy cel , ale specyfikacja została porzucona .

Odwrotna nie jest prawdziwe określając wymiary okna w trzecim argumencie window.open(), możesz uruchomić nowe okno, gdy preferowane są tabulatory.

Quentin
źródło
42
@AliHaideri Javascript nie ma nic wspólnego z otwieraniem nowej karty / okna. Wszystko zależy od ustawień przeglądarki. Używanie window.openmówi przeglądarce, aby otworzyła coś nowego, a następnie przeglądarka otwiera to, co jest wybrane w jej ustawieniach - zakładce lub oknie. W testowanych przeglądarkach zmień ustawienia, aby otworzyć w nowym oknie zamiast karty, a zobaczysz, że rozwiązania innych są złe.
Ian
239
Dwie rzeczy, które marnują czas innych ludzi bardziej niż mówienie im, że coś nie można zrobić. (1) Powiedzenie im czegoś, czego nie można zrobić, można zrobić. (2) Milczenie i pozwalanie im szukać sposobu na zrobienie czegoś, czego nie da się zrobić.
Quentin,
8
@Ciastko - Dokumentacja zwykle nie zawraca sobie głowy opisywaniem funkcji, które nie istnieją. evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/…
Quentin
9
@Neel - Ponieważ zwięźle przechodzi do tematu, o którym wiele osób chce wiedzieć.
Quentin
4
Autorzy mogą robić różne rzeczy (głównie pisząc inny kod). Żadna z tych rzeczy nie spowoduje uruchomienia karty zamiast okna.
Quentin
1733

To 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 onclickmodule obsługi łącza, aby zapobiec blokowaniu wyskakujących okienek i domyślnemu zachowaniu „nowego okna”. Możesz to zrobić w ten sposób lub dodając detektor zdarzeń do swojego DOMobiektu. 

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

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

Rinto George
źródło
117
Nie działa. Dostałem wiadomość po prawej stronie paska adresu: Popup zablokowany . Następnie zezwoliłem na wyskakujące okienka. I voila, otwiera się w wyskakującym okienku, a nie w zakładce ! Chrome 22.0.1229.94 w systemie OS X Lion.
dokładnie
39
@ b1naryatr0phy To dlatego, że właściwie nie przetestowałeś go poprawnie. Zmień ustawienia w swoich przeglądarkach. To, czy jest otwierane na karcie, czy w oknie, zależy od ustawień przeglądarki. Nic nie możesz zrobić, dzwoniąc do window.open (lub dowolnego Javascript), aby wybrać sposób otwarcia nowego okna / karty.
Ian
Pytanie: Ustawiam adres URL bez protokołu (na przykład my.site.com/Controller/Index). W rezultacie otrzymuję nowe okno (zakładkę) według adresu URL, takiego jak adres URL bieżącej strony (skąd korzystam z funkcji OpenInNewTab) oraz przekazane do adresu URL funkcji. W oknie protokołu otwiera się poprawny link. Dlaczego?
user2167382
2
var win = window.open (url, '_blank'); „_blank” nie jest konieczne, dla window.open () drugim parametrem jest strWindowName, dla: Nazwa ciągu dla nowego okna. Nazwa może być używana jako cel linków i formularzy przy użyciu atrybutu target elementu <a> lub <form>. Nazwa nie powinna zawierać żadnych białych znaków. Zauważ, że strWindowName nie określa tytułu nowego okna.
hydranger
Czy jest jakiś sposób, aby otworzyć tę nową kartę bez iframe w piaskownicy? Gdy go używam, otrzymuję błędy CORS, ponieważ wartość document.domain nie jest zmieniana, ponieważ jest otwierana jako element iframe.
Ids van der Zee
380

window.open()nie otworzy się w nowej karcie, jeśli nie dzieje się to podczas rzeczywistego zdarzenia kliknięcia. W podanym przykładzie otwierany jest adres URL rzeczywistego zdarzenia kliknięcia. Działa to 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ć wywołanie Ajax w ramach funkcji kliknięcia i chcesz otworzyć okno sukcesu, upewnij się, że wykonujesz wywołanie Ajax z async : falsezestawem opcji.

Venkat Kotra
źródło
28
Byłoby miło oznaczyć to jako PRAWIDŁOWĄ odpowiedź. Moje testy z Chrome v26 (Windows) potwierdzają, że jeśli kod znajduje się w module obsługi kliknięć przycisku, otwiera nową kartę, a jeśli kod jest wywoływany programowo, np. Z konsoli, to otwiera nowe okno.
CyberFonic
2
@Ian Z moich testów w przeglądarkach z ustawieniami domyślnymi, ta odpowiedź działa w przypadkach, w których powyższe odpowiedzi nie. Przyjęta odpowiedź, która mówi „nic nie możesz zrobić”, jest prawdziwa tylko wtedy, gdy użytkownik zmieni ustawienia domyślne.
Garfield
@Ian Dla jasności wspomniałem o tym w odpowiedzi na ostrzeżenie o ustawieniach użytkownika. „To zadziała, pod warunkiem, że użytkownik ma odpowiednie ustawienia w przeglądarce.” Myślę, że większość użytkowników nie zmienia ustawień przeglądarki i ta odpowiedź działa na większość z nich.
Venkat Kotra
async: falsenie działa w Chrome. Aby otworzyć nowe okno z wywołania zwrotnego, musisz najpierw otworzyć puste okno przed wysłaniem żądania HTTP, a następnie zaktualizować je. Oto dobry hack .
attacomsian
250

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, szczególnie w odniesieniu do preferencji przeglądarki użytkownika. Nie można oczekiwać, że to samo zachowanie window.openbędzie prawdziwe we wszystkich przeglądarkach Internet Explorer, Firefox i Chrome, ze względu na różne sposoby, w jakie obsługują preferencje przeglądarki użytkownika.

Na przykład użytkownicy programu Internet Explorer (11) mogą otwierać wyskakujące okienka w nowym oknie lub nowej karcie, nie można zmusić użytkowników programu Internet Explorer 11 do otwierania wyskakujących okienek w określony sposób window.open , jak wspomniano w odpowiedzi Quentina .

W przypadku użytkowników przeglądarki Firefox (29) korzystanie z nich window.open(url, '_blank') zależy od preferencji kart przeglądarki, ale nadal można zmusić ich do otwierania wyskakujących okienek w nowym oknie, określając szerokość i wysokość (patrz sekcja „Co z Chrome?” Poniżej).

Demonstracja

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

Internet Explorer (11)

Okno dialogowe ustawień przeglądarki Internet Explorer 1

Okno dialogowe ustawień zakładki Internet Explorer

Strona testowa

Po skonfigurowaniu przeglądarki Internet Explorer (11) do otwierania wyskakujących okienek w nowym oknie, jak pokazano powyżej, użyj następującej 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>

Zauważ, że wyskakujące okienka są otwierane w nowym oknie, a nie w nowej karcie.

Możesz również przetestować te fragmenty powyżej w przeglądarce Firefox (29) z preferencjami tabulatorów ustawionymi na nowe okna i zobaczyć te same wyniki.

Co z Chrome? Implementuje się window.openinaczej niż Internet Explorer (11) i Firefox (29).

Nie jestem w 100% pewien, ale wygląda na to, że Chrome (wersja 34.0.1847.131 m) nie wydaje się mieć żadnych ustawień, których użytkownik może użyć, aby wybrać, czy otwierać wyskakujące okienka w nowym oknie lub nowej karcie (np. Firefox i Internet Explorer mieć). Sprawdziłem dokumentację Chrome do zarządzania wyskakującymi oknami , ale nic nie wspominało o takich rzeczach.

Również po raz kolejny różne przeglądarki wydają się inaczej wdrażać zachowanie window.open . W Chrome i Firefox określenie szerokości i wysokości wymusi wyskakujące okienko, nawet jeśli użytkownik ustawił Firefoksa (29) na otwieranie nowych okien w nowej karcie (jak wspomniano w odpowiedziach na JavaScript otwieranie 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 Internet Explorerze 11, jeśli użytkownicy ustawią karty jako preferencje przeglądarki, nawet brak określenia szerokości i wysokości wymusi dla nich nowe wyskakujące okno.

Tak więc zachowanie window.openw Chrome wydaje się być otwierane wyskakujące okienka w nowej karcie, gdy stosuje się w onclickprzypadku, aby otworzyć je w nowych oknach, gdy używana z konsoli przeglądarki ( jak wspomniano przez innych ludzi ), i otworzyć je w nowych oknach, gdy określone za pomocą szerokości i wysokości.

Podsumowanie

Różne przeglądarki window.open różnie implementują zachowanie w zależności od preferencji użytkowników. Nie można oczekiwać, że to samo zachowanie window.openbędzie prawdziwe we wszystkich przeglądarkach Internet Explorer, Firefox i Chrome, ze względu na różne sposoby, w jakie obsługują preferencje przeglądarki użytkownika.

Dodatkowe czytanie

Peter Mortensen
źródło
12
Nie odpowiedziałeś na pytanie, po prostu udowodniłeś, że window.open jest niespójne.
BentOnCoding
223

Jedna wkładka:

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

Tworzy wirtualny aelement, daje go, target="_blank"aby otwierał się w nowej karcie, daje mu właściwy, url hrefa następnie klika.

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

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

a następnie możesz użyć go w następujący sposób:

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

Ważna uwaga:

openInNewTab(jak również każde inne rozwiązanie na tej stronie) należy wywołać podczas wywołania zwrotnego akcji użytkownika - np. zdarzenie kliknięcia wewnątrz (nie jest konieczne bezpośrednio w funkcji wywołania zwrotnego, ale podczas akcji kliknięcia).

Jeśli zadzwonisz ręcznie w przypadkowym momencie (np. W odstępie czasu lub po odpowiedzi serwera) - może zostać zablokowany przez przeglądarkę (co ma sens, ponieważ stanowiłoby to zagrożenie bezpieczeństwa i może prowadzić do bardzo złej wygody użytkownika )

pie6k
źródło
8
Dziękuję Ci. W twoim czystym JS brakuje brakującego elementu - jak napisał Luke Alderton (patrz poniżej), musisz dołączyć utworzony element do treści dokumentu, w kodzie wisi w próżni, a przynajmniej w Firefox 37 nic nie robi .
greenoldman
4
@mcginniwa Każda taka akcja - jeśli nie zostanie wywołana przez akcję użytkownika, taką jak kliknięcie myszą, zmieni blokadę wyskakujących okienek. Wyobraź sobie, że możesz po prostu otworzyć dowolny adres URL za pomocą Javascript bez działania użytkownika - byłoby to dość niebezpieczne. Jeśli umieścisz ten kod w zdarzeniu, np. Funkcję kliknięcia - będzie działał dobrze - będzie tak samo ze wszystkimi proponowanymi tutaj rozwiązaniami.
pie6k
4
Możesz uprościć swój kod w następujący sposób: $('<a />',{'href': url, 'target', '_blank'}).get(0).click();
shaedrich
5
@shaedrich zainspirowany twoją wycinką Dodałem nie-jquery one-liner:Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
pie6k
To nie działa w FF!
Nolesh
91

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

Spróbuj tego:

//With JQuery

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

Z czystym JavaScript,

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
Mohammed Safeer
źródło
Ale w tym pytaniu nie wspominają o autorze strony. Chcę tylko otworzyć adres URL w nowym oknie lub nowej karcie. To zależy od przeglądarki. Nie musimy martwić się o autora. Sprawdź to skrzypce. Działa
Mohammed Safeer
Stwierdzono, że nie działało to na skrzypcach js i plunker, ale działa podczas tworzenia pliku HTML. Jest tak, ponieważ skrzypce js, dane wyjściowe są wyświetlane w ramce iframe, więc nowe okno jest blokowane z powoduthe request was made in a sandboxed frame whose 'allow-popups' permission is not set
Mohammed Safeer
67

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

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

W ten sposób tuż przed tym, jak przeglądarka podąży za linkiem, ustawiam atrybut docelowy, dzięki czemu link otworzy się w nowej karcie lub oknie (w zależności od ustawień użytkownika ).

Przykład jednego wiersza w 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.

Można to również osiągnąć za pomocą natywnych interfejsów API DOM przeglądarki:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
arikfr
źródło
57

Korzystam z poniższych i działa bardzo dobrze!

window.open(url, '_blank').focus();
Ezequiel García
źródło
2
Może się otworzyć w nowej karcie lub oknie, w zależności od ustawień przeglądarki. Pytanie dotyczy w szczególności otwarcia w nowej karcie, nawet jeśli preferencje dotyczą nowego okna.
Quentin
19

Ciekawym faktem jest to, że nowej karty nie można otworzyć, jeśli użytkownik nie wywoła akcji (kliknięcia przycisku lub czegoś) lub jeśli jest asynchroniczny, na przykład NIE otworzy się w nowej karcie:

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

Może się to jednak 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');              
    }
});
karaxuna
źródło
2
To jest blokowane jako wyskakujące okienko w Firefox 28, Chrome 34b i Safari 7.0.2, wszystkie ustawienia zapasów. :(
Steve Meisner
1
„nowej karty nie można otworzyć, jeśli użytkownik nie wywoła akcji (kliknięcia przycisku lub czegoś) lub jeśli jest asynchroniczny” - prawda dla Chrome, ale nie dla wszystkich przeglądarek. Zapisz <script>open('http://google.com')</script>do .htmlpliku i otwórz go w nowej instalacji najnowszej wersji Firefoksa; zauważysz, że Firefox szczęśliwie otwiera Google w nowej karcie (być może po tym, jak chcesz, aby zezwalał na wyskakujące okienka), a nie w nowym oknie.
Mark Amery
13

Po prostu pominięcie parametrów [strWindowFeatures] otworzy nową kartę, O ile ustawienie przeglądarki nie zastąpi ustawień przeglądarki (ustawienie przeglądarki przebija JavaScript).

Nowe okno

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

Nowa karta

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

- lub -

var myWin = window.open(strUrl);
MannyC
źródło
11 
(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')))
spirinvladimir
źródło
11

Możesz użyć lewy z 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();
}

Demo jsFiddle

CodeNinja
źródło
4
Jeśli wybierzesz tę metodę, upewnij się, że adres URL nie ma parametrów zapytania, ponieważ zostaną one pominięte przez przesłanie formularza. Jednym z rozwiązań jest osadzenie ukrytych elementów wejściowych w elemencie formularza, które mają nameklucz i valuewartość dla wszystkich parametrów wewnątrz parametrów zapytania. A następnie prześlij formularz
Mudassir Ali
można to zrobić prościej za pomocą atagu zamiast formularza i używając .click()metody jQuery do „przesłania” go. sprawdź moją odpowiedź
10

Nie ma to nic wspólnego z ustawieniami przeglądarki, jeśli próbujesz otworzyć nową kartę z funkcji niestandardowej.

Na tej stronie otwórz konsolę JavaScript i wpisz:

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

I spróbuje otworzyć wyskakujące okienko niezależnie od twoich ustawień, ponieważ „kliknięcie” pochodzi z akcji niestandardowej.

Aby zachowywać się jak rzeczywiste „kliknięcie myszką” na link, musisz postępować zgodnie z radą @ spirinvladimir i naprawdę go utworzyć:

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

Oto kompletny przykład (nie próbuj go na jsFiddle lub podobnych edytorach internetowych, ponieważ nie pozwoli ci to przekierować na zewnętrzne strony z tego miejsca):

<!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>
chipairon
źródło
1
Skończyło się na innym rozwiązaniu, w którym robię w = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...)zgodnie z theandystratton.com/2012
Paul Tomblin
11
@FahadAbidJanjua To absolutnie nieprawda . Nadal zależy to od ustawień przeglądarki. W specyfikacjach HTML lub JavaScript nie ma niczego, co deklarowałoby, że „akcja niestandardowa” musi otwierać się w wyskakującym okienku, a nie w zakładce. Rzeczywiście, żadna przeglądarka na moim bieżącym komputerze nie wyświetla tego zachowania.
nmclean
7 
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}
Andrew Luca
źródło
1
Może się otworzyć w nowej karcie lub oknie, w zależności od ustawień przeglądarki. Pytanie dotyczy w szczególności otwarcia w nowej karcie, nawet jeśli preferencje dotyczą nowego okna.
Quentin,
3

JQuery

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

JS

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
Bryan
źródło
Może się otworzyć w nowej karcie lub oknie, w zależności od ustawień przeglądarki. Pytanie dotyczy w szczególności otwarcia w nowej karcie, nawet jeśli preferencje dotyczą nowego okna.
Quentin
2

Lub możesz po prostu utworzyć element łącza i kliknąć go ...

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

Nie powinno to być blokowane przez żadne programy blokujące wyskakujące okienka ... Mam nadzieję.

Luke Alderton
źródło
2

Istnieje odpowiedź na to pytanie i nie jest to nie.

Znalazłem łatwe obejście:

Krok 1: Utwórz niewidoczny link:

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

Krok 2: Kliknij ten link programowo:

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

Proszę bardzo! Działa dla mnie urok.

ALZlper
źródło
Może się otworzyć w nowej karcie lub oknie, w zależności od ustawień przeglądarki. Pytanie dotyczy w szczególności otwarcia w nowej karcie, nawet jeśli preferencje dotyczą nowego okna.
Quentin
1

wprowadź opis zdjęcia tutaj

Zbadałem wiele informacji o tym, jak otworzyć nową kartę i pozostać na tej samej karcie. Znalazłem jedną małą sztuczkę, aby to zrobić. Załóżmy, że masz adres URL, który musisz otworzyć - newUrl i stary adres URL - currentUrl , na którym musisz pozostać po otwarciu nowej karty. Kod JS będzie wyglądał następująco:

// init urls
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
// open window with url of current page, you will be automatically moved 
// by browser to a new opened tab. It will look like your page is reloaded
// and you will stay on same page but with new page opened
window.open(currentUrl , '_blank');
// on your current tab will be opened new url
location.href = newUrl;
Vaha
źródło
Pytanie dotyczy otwarcia nowej karty, gdy użytkownik woli otwierać je w nowych oknach. Nie pyta, jak otworzyć adres URL w nowej karcie, jednocześnie otwierając inny adres URL w istniejącej karcie.
Quentin
0

Jak o stworzenie <a>ze _blankjako targetwartość atrybutu, a urljakohref , z wyświetlaczem styl: ukryte z aa elementu dzieci? Następnie dodaj do DOM, a następnie uruchom zdarzenie click na elemencie potomnym.

AKTUALIZACJA

To nie działa. Przeglądarka zapobiega domyślnemu zachowaniu. Można go uruchomić programowo, ale nie jest zgodny z domyślnym zachowaniem.

Sprawdź i przekonaj się sam: http://jsfiddle.net/4S4ET/

Zwycięzca
źródło
-1

Otwieranie nowej karty z poziomu rozszerzenia przeglądarki Firefox (Mozilla) wygląda następująco:

gBrowser.selectedTab = gBrowser.addTab("http://example.com");
Smile4ever
źródło
-1

Ten sposób jest podobny do powyższego rozwiązania, ale wdrożony inaczej

.social_icon -> jakaś klasa z 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();
   });
CG_DEV
źródło
-1

Może to być włamanie, ale w Firefoksie, jeśli podasz trzeci parametr, „fullscreen = yes”, otworzy się nowe okno.

Na przykład,

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

Wygląda na to, że faktycznie zastępuje ustawienia przeglądarki.

Kunal
źródło
-1

to działa dla mnie, po prostu zapobiegaj zdarzeniu, dodaj adres URL, a <a> tagnastępnie uruchom na nim zdarzenie kliknięcia 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>
Carlos Salazar
źródło
Może się otworzyć w nowej karcie lub oknie, w zależności od ustawień przeglądarki. Pytanie dotyczy w szczególności otwarcia w nowej karcie, nawet jeśli preferencje dotyczą nowego okna.
Quentin
-1

window.open(url)Otworzy url w nowej karcie przeglądarki. Alternatywa Belowe JS

let a= document.createElement('a');
a.target= '_blank';
a.href= 'https://support.wwf.org.uk/';
a.click(); // we don't need to remove 'a' from DOM because we not add it

Oto działający przykład (fragmenty przepływu stosu nie pozwalają na otwarcie nowej karty)

Kamil Kiełczewski
źródło
„Okno.open (adres URL) otworzy adres URL w nowej karcie przeglądarki” - będzie odpowiadać preferencjom użytkownika dotyczącym nowego okna lub nowej karty. Nie wymusi nowej karty, gdy preferencja dotyczy okna. (O co chodzi w tym pytaniu). To samo dotyczy celu = _blank.
Quentin
Oba podejścia, które sugerujesz, były wielokrotnie wymieniane (i krytykowane) w poprzednich 56 nieodebranych odpowiedziach na to pytanie.
Quentin
-1

To, czy otworzyć adres URL w nowej karcie, czy w nowym oknie, jest faktycznie kontrolowane przez preferencje przeglądarki użytkownika. Nie ma możliwości zastąpienia go w JavaScript.

window.open()zachowuje się różnie w zależności od sposobu jego użycia. Jeśli zostanie wywołany w wyniku bezpośredniego działania użytkownika , powiedzmy, że kliknięcie przycisku powinno działać dobrze i otworzyć nową kartę (lub okno):

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

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

Jeśli jednak spróbujesz otworzyć nową kartę z wywołania zwrotnego żądania AJAX , przeglądarka zablokuje ją, ponieważ była to bezpośrednia akcja użytkownika.

Aby ominąć blokadę wyskakujących okienek i otworzyć nową kartę z wywołania zwrotnego, oto mały hack :

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();
        });
});
attacomsian
źródło
-1

Próbowałem w ten sposób i wydaje się, że działa dobrze

window.open('example.com', 'newWin');

Znalazłem tutaj wiele działających przykładów:

http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html#TestPopupControl

Artem Szewcow
źródło
Zostanie otwarte w nowej karcie lub oknie zgodnie z preferencjami użytkownika. Nie wymusi nowej zakładki, o którą chodzi w tym pytaniu.
Quentin
Czy przegapiłeś nieco w pytaniu, kiedy OP już tego próbował? lub stackoverflow.com/a/59565074/19068 ? lub stackoverflow.com/a/35939565/19068 ? lub stackoverflow.com/a/30512485/19068 ? lub stackoverflow.com/a/11384018/19068 ? lub stackoverflow.com/a/26990478/19068 ?
Quentin
@Quentin Tęskniłem za tą częścią, ale kiedy próbowałem wywołać window.open z drugim parametrem «windowName» równym «_blank» lub bez niego, wyskakujące okienko lub nowa karta nie pojawiły się w najnowszej przeglądarce Google Chrome. Kiedy zmieniłem nazwę okna na «newWin», otworzyła się nowa karta. To dziwne, ponieważ parametr nazwy okna jest opcjonalny.
Artem Szewcow
-4

Zgodzę się nieco z osobą, która napisała (parafrazując tutaj): „W przypadku linku na istniejącej stronie internetowej przeglądarka zawsze otworzy link w nowej karcie, jeśli nowa strona jest częścią tej samej strony internetowej, co istniejąca strona internetowa. ” Dla mnie przynajmniej ta „ogólna zasada” działa w Chrome, Firefox, Opera, IE, Safari, SeaMonkey i Konqueror.

W każdym razie istnieje mniej skomplikowany sposób na wykorzystanie tego, co przedstawiła druga osoba. Zakładając, że mówimy o Twojej własnej stronie internetowej („thissite.com” poniżej), w której chcesz kontrolować, co robi przeglądarka, a następnie poniżej chcesz, aby „specialpage.htm” był PUSTY, bez HTML w ogóle ( oszczędza czas wysyłania danych z serwera!).

 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
 }
vernonner3voltazim
źródło
-7

Jeśli chcesz tylko otwierać linki zewnętrzne (linki prowadzące do innych stron), ten fragment JavaScript / jQuery działa dobrze:

$(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');
        }
    });
});
Michael
źródło
Ta odpowiedź nie jest odpowiednia dla tego pytania, ale jest to bardzo przydatna myśl! Dziękuję za pomysł!
Nuri Akman
-9

Przeglądarka zawsze otworzy link w nowej karcie, jeśli link znajduje się w tej samej domenie (w tej samej witrynie). Jeśli link znajduje się w innej domenie, otworzy go w nowej karcie / oknie, w zależności od ustawień przeglądarki.

Zgodnie z tym możemy użyć:

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

I dodaj trochę kodu 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;
    });
});

Więc najpierw otwórz nowe okno na tej samej stronie z celem _blank (otworzy się w nowej karcie), a następnie otwórz żądaną stronę internetową w tym nowym oknie.

loshMiS
źródło