Jak symulować target = „_ blank” w JavaScript

156

Kiedy użytkownik kliknie łącze, muszę zaktualizować pole w bazie danych, a następnie otworzyć żądane łącze w nowym oknie. Aktualizacja nie stanowi problemu, ale nie wiem, jak otworzyć nowe okno bez konieczności kliknięcia innego hiperłącza.

<body onLoad="document.getElementById('redirect').click">
<a href="http://www.mydomain.com?ReportID=1" id="redirect" target="_blank">Report</a>
</body>
Phillip Senn
źródło
1
Hm? target="_top"nie otwiera się w nowym oknie - target="_blank"nie.
Tomalak
Jeśli link otwiera się już w nowym oknie (z powodu target = "_ blank"), a moduł obsługi kliknięć javascript już aktualizuje bazę danych, dlaczego miałbyś w ogóle otwierać nowe okno z Javascriptem?
Joel Mueller

Odpowiedzi:

298
<script>
    window.open('http://www.example.com?ReportID=1', '_blank');
</script>

Drugi parametr jest opcjonalny i jest nazwą okna docelowego.

ChristopheD
źródło
2
window.openrobi to, co target="_blank"robi - otwiera adres URL w nowym oknie.
ceejayoz
3
tak. drugi argument metody window.open () to „nazwa”, którą chcesz nadać oknu, podobnie jak w przypadku ustawiania celu w łączu. developer.mozilla.org/En/DOM:window.open
Omer Bokhari
2
Rozumiem. Okno.open jest blokowane przez program blokujący wyskakujące okienka przeglądarki Firefox, ale target = "_ blank" nie. Czy powinienem po prostu poprosić klienta o włączenie wyskakujących okienek z jego własnej witryny internetowej?
Phillip Senn
7
Czy istnieje rozwiązanie JavaScript, które nie jest blokowane przez programy blokujące wyskakujące okienka, takie jak Firefox?
ma11hew28
4
@MattDiPasquale blokowanie window.open jest w pewnym sensie celem blokowania wyskakujących okienek! Jeśli wykonasz połączenie w odpowiedzi na kliknięcie, masz większe szanse na to, że nie zostanie zablokowane.
William Denniss
19

To może pomóc

var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    link.href = 'http://www.google.com';
    link.target = '_blank';
    var event = new MouseEvent('click', {
        'view': window,
        'bubbles': false,
        'cancelable': true
    });
    link.dispatchEvent(event);
Jair Reina
źródło
IE11: „Błąd Javascript w czasie wykonywania: niepoprawne działanie dla obiektu”
T-moty
8
Tę odpowiedź można poprawić, dodając opis tego, co się dzieje
Elly Post,
13

Wiem, że to już załatwiona i rozwiązana umowa, ale oto, czego używam do rozwiązania problemu w mojej aplikacji.

if (!e.target.hasAttribute("target")) {
    e.preventDefault();     
    e.target.setAttribute("target", "_blank");
    e.target.click();
    return;
}

Zasadniczo chodzi o to, że sprawdzam, czy link ma target=_blank atrybut. Jeśli tak się nie stanie, zatrzymuje wywołanie łącza, ustawia je tak, aby otwierało się w nowym oknie, a następnie programowo je klika.

Możesz pójść o krok dalej i pominąć zatrzymywanie oryginalnego kliknięcia (i sprawić, by kod był o wiele bardziej zwarty), próbując tego:

if (!e.target.hasAttribute("target")) {
    e.target.setAttribute("target", "_blank");
}

Jeśli używasz jQuery do abstrahowania od implementacji dodawania atrybutu między przeglądarkami, powinieneś użyć tego zamiast e.target.setAttribute("target", "_blank"):

    jQuery(event.target).attr("target", "_blank")

Być może będziesz musiał go przerobić, aby pasował do twojego konkretnego przypadku użycia, ale oto jak podrapałem swój własny swędzenie.

Oto demo tego w akcji, z którym możesz zadzierać.

(Odnośnik w jsfiddle powraca do tej dyskusji .. nie potrzeba nowej karty :))

akamaozu
źródło
1
Przede wszystkim wolę tę odpowiedź, ponieważ, cóż, używa jquery i pozwala uniknąć problemów z blokowaniem okien wyskakujących window.open. Jest to całkowicie uzasadnione w przypadku niektórych danych stron trzecich, które zawierają linki, którym brakuje celu.
IncredibleHat
7

Osobiście wolę używać poniższego kodu, jeśli dotyczy pojedynczego łącza. W przeciwnym razie najlepiej będzie, jeśli utworzysz funkcję z podobnym kodem.

onclick="this.target='_blank';"

Zacząłem używać tego do ominięcia ścisłego testu XHTML W3C.

Zennethe Fuchs
źródło
1
Myślę, że wbudowany JavaScript jest bardziej skomplikowany niż dodanie „niestandardowego” atrybutu, który działa wszędzie.
Matti Virkkunen
@MattiVirkkunen w pewnych sytuacjach jest to jedyne rozwiązanie
Claudiu Creanga
1
@Claudiu: Jeśli znajdziesz się w tak absurdalnej sytuacji, powinieneś raczej naprawić przyczynę, niż krążyć wokół niej.
Matti Virkkunen,
5

Tak to robię z jQuery. Mam klasę dla każdego linku, który chcę otworzyć w nowym oknie.

$(function(){

    $(".external").click(function(e) {
        e.preventDefault();
        window.open(this.href);
    });
});
Jindra Helcl
źródło
2

Możesz wyodrębnić href ze znacznika a:

window.open(document.getElementById('redirect').href);
treznik
źródło
1

Może to pomóc w otwieraniu wszystkich linków do stron :

$(".myClass").each(
     function(i,e){
        window.open(e, '_blank');
     }
);

Otworzy się każdy <a href="" class="myClass"></a> elementy linków do innej karty, tak jakbyś kliknął każdy z nich.

Wystarczy wkleić go do konsoli przeglądarki. Wymagany framework jQuery

radacina
źródło