Jak mogę otworzyć łącze w nowym oknie?

94

Mam moduł obsługi kliknięć dla określonego linku, wewnątrz którego chcę zrobić coś podobnego do następującego:

window.location = url

Potrzebuję tego, aby faktycznie otworzyć adres URL w nowym oknie, jak mam to zrobić?

Chris
źródło

Odpowiedzi:

204

Możesz polubić:

window.open('url', 'window name', 'window settings')

jQuery:

$('a#link_id').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

Można również ustawić target, aby _blankrzeczywiście.

Sarfraz
źródło
ale ten kod jquery nie przejdzie automatycznie do celu
Amr Elgarhy
26
_blank jest domyślnym celem, więc użycie window.open (url) powinno wystarczyć
themerlinproject
Nie jestem pewien, czy pomoże i nie jest to dokładnie ten sam problem, ale szukałem tego samego rozwiązania, aby pobrać plik (nie z linku, ale z przycisku), aw Chrome okno się nie otworzyło i nie ma pobierania, dopóki po prostu nie przejdę do window.location = „url”, który nie zmienia lokalizacji, ale pobiera plik ...
gdoumenc
window.open (url) jest w porządku :)
fudu
34

Oto jak zmusić cel do wnętrza modułu obsługi kliknięcia:

$('a#link_id').click(function() {
    $(this).attr('target', '_blank');
});
chadwackerman
źródło
5
Nie ma potrzeby używania selektora jQuery w module obsługi kliknięć, aby $(this).attr('target', '_blank'); można było zmienić wiersz na this.target = "_blank";Również, jeśli linki kotwicy na stronie można zmodyfikować tak, aby miały rel="external"atrybuty, można utworzyć globalną procedurę obsługi kliknięcia dla strony z selektorem jQuery a[rel="external"]zamiast posiadania program obsługi kliknięć na link wybrany za pomocąa#link_id
himanshu
17

będziesz musiał użyć window.open(url);

źródła:
http://www.htmlcodetutorial.com/linking/linking_famsupp_120.html
http://www.w3schools.com/jsref/met_win_open.asp

Amr Elgarhy
źródło
5
Yikes! Nie używaj ani nie linkuj do w3schools, NIE jest to związane z W3C. Zamiast tego użyj MDN: developer.mozilla.org/en-US/docs/Web/API/Window.open
AB Carroll
5
w3schools jest dobre (ignoruj ​​'nieliczne' trolle w3c) ... nadal będzie autorytatywnym źródłem ... nawet w3c teraz ponownie je wspiera ;-)
Dawesi
4

Możesz także użyć do tego metody prop () jquery.

$(function(){
  $('yourselector').prop('target', '_blank');
}); 
Usha
źródło
2

Właśnie znalazłem interesujące rozwiązanie tego problemu. Tworzyłem przęsła, które zawierają informacje na podstawie zwrotu z usługi internetowej. Pomyślałem o próbie umieszczenia łącza wokół zakresu, tak aby po kliknięciu „a” uchwyciło kliknięcie.

Ale próbowałem uchwycić kliknięcie rozpiętością ... więc pomyślałem, dlaczego nie zrobić tego, tworząc rozpiętość.

var span = $('<span id="something" data-href="'+url+'" />');

Następnie powiązałem moduł obsługi kliknięć z zakresem, który utworzył łącze na podstawie atrybutu „data-href”:

span.click(function(e) {
    e.stopPropagation();
    var href = $(this).attr('data-href');
    var link = $('<a href="http://' + href + '" />');
    link.attr('target', '_blank');
    window.open(link.attr('href'));
});

To z powodzeniem umożliwiło mi kliknięcie zakresu i otwarcie nowego okna z odpowiednim adresem URL.

Dramoth
źródło
1

Co jest nie tak <a href="myurl.html" target="_blank">My Link</a>? Nie potrzeba Javascript ...

Michaja Broertjes
źródło
1

to rozwiązanie uwzględniło również przypadek, że adres URL jest pusty i wyłączony (szary) pusty link.

$(function() {
  changeAnchor();
});

function changeAnchor() {
  $("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
    $(this).css("background", "none");
    $(this).css("font-weight", "normal");

    var url = $(this).attr('href').trim();
    if (url == " " || url == "") { //disable empty link
      $(this).attr("class", "disabled");
      $(this).attr("href", "javascript:void(0)");
    } else {
      $(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
    }
  });
}
a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>

Scott 混合 理论
źródło
0

Pamiętaj, jeśli chcesz wykonywać żądania AJAX wewnątrz funkcji obsługi zdarzenia dla zdarzenia kliknięcia. Z jakiegoś powodu Chrome (i być może inne przeglądarki) nie otworzy nowej karty / okna.

user2618825
źródło
0

To niezbyt fajna poprawka, ale działa:

CSS:

.new-tab-opener
{
    display: none;
}

HTML:

<a data-href="http://www.google.com/" href="javascript:">Click here</a>
<form class="new-tab-opener" method="get" target="_blank"></form>

JavaScript:

$('a').on('click', function (e) {    
    var f = $('.new-tab-opener');
    f.attr('action', $(this).attr('data-href'));
    f.submit();
});

Przykład na żywo: http://jsfiddle.net/7eRLb/

adriandorin
źródło
0

Microsoft IE nie obsługuje nazwy jako drugiego argumentu.

window.open('url', 'window name', 'window settings');

Problem w tym window name. To zadziała:

window.open('url', '', 'window settings')

Microsoft dopuszcza tylko następujące argumenty, jeśli w ogóle używa tego argumentu:

  • _pusty
  • _głoska bezdźwięczna
  • _rodzic
  • _Szukaj
  • _samego siebie
  • _Top

Sprawdź tę witrynę Microsoft

dhanesh sr
źródło
4
-1: niezależnie od kopiowania / wklejania naruszającego licencję ze stackoverflow.com/a/1462500/560648 , to nieprawda. Argument jest obsługiwany . Po prostu nie może zawierać spacji, myślników ani innych znaków interpunkcyjnych. Przeczytaj inne odpowiedzi i komentarze na to pytanie.
Wyścigi lekkości na orbicie