Javascript - Otwórz podany adres URL w nowej karcie, klikając przycisk


109

Chciałbym mieć przycisk, który przekierowuje na podany adres URL i otwiera się w nowej karcie. Jak to zrobić?

Odpowiedzi:


144

Użyj tego:

<input type="button" value="button name" onclick="window.open('http://www.website.com/page')" />

Zadziałało dla mnie i otworzy rzeczywiste nowe okno „wyskakujące” zamiast nowej pełnej przeglądarki lub karty. Możesz także dodać do niego zmienne, aby zatrzymać wyświetlanie określonych cech przeglądarki w następujący sposób:

onclick="window.open(this.href,'popUpWindow','height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no'); return false;"

2
@ wong2 Może zechcesz zmienić odpowiedź na tę. Ten aktualnie wybrany jest zbyt rozwlekły, aby był skuteczny.
CSS


29

Dodanie target = "_ blank" powinno to zrobić:

<a id="myLink" href="www.google.com" target="_blank">google</a>

3
Rozumiem, przepraszam, że to przegapiłem. Cóż, możesz stylizować link tak, aby wyglądał i działał jak przycisk. Jeśli używasz interfejsu użytkownika jQuery, po prostu użyj przycisku, aby to zrobić.
Tim Büthe

1
Doskonałe rozwiązanie dla większości z nas, którzy zajmują się tylko projektowaniem stron internetowych! Dziękuję Ci!
SMBiggs

1
+1, ponieważ dałeś dobre rozwiązanie tym, którzy szukają prostej odpowiedzi „otwórz link w nowej karcie”, jeśli nie używają przycisku.
user295583058

Dokładnie to, czego chcę. Dzięki
Shahrukh Anwar

+1, jeśli coś otwiera stronę w nowej karcie, jest to logicznie link, więc <a>tag jest odpowiedni. Należy używać stylów, aby wyglądał jak przycisk.
Kos

21

Możesz zapomnieć o używaniu JavaScript, ponieważ przeglądarka kontroluje, czy otworzy się w nowej karcie. Najlepszą opcją jest zamiast tego wykonanie następujących czynności:

<form action="http://www.yoursite.com/dosomething" method="get" target="_blank">
    <input name="dynamicParam1" type="text"/>
    <input name="dynamicParam2" type="text" />
    <input type="submit" value="submit" />
</form>

To zawsze otworzy się w nowej karcie, niezależnie od przeglądarki używanej przez klienta z powodu rozszerzenia target="_blank" atrybut.

Jeśli potrzebujesz tylko przekierowania bez parametrów dynamicznych, możesz użyć linku z target="_blank"atrybutem, jak sugeruje Tim Büthe.


1
Działa zgodnie z wymaganiami (testowane na Chrome, Firefox, IE10) :)
Zeeshan

10

Użyj window.openzamiast, window.locationaby otworzyć nowe okno lub kartę (w zależności od ustawień przeglądarki).

Twoje skrzypce nie działają, ponieważ nie ma buttonelementu do wyboru. Spróbuj input[type=button]lub daj przycisk idi użyj #buttonId.


10

Moja preferowana metoda ma tę zaletę, że w znacznikach nie ma osadzonego kodu JavaScript:

CSS

a {
  color: inherit;
  text-decoration: none;
}

HTML

<a href="http://example.com" target="_blank"><input type="button" value="Link-button"></a>

Chyba mam nową preferowaną metodę.
Halter

Myślę, że ten odpowiada na pytanie bardziej poprawnie. +1 :)
Pramesh Bajracharya

3

Otwórz w nowej karcie za pomocą javascript

 <button onclick="window.open('https://www.our-url.com')" id="myButton" 
 class="btn request-callback" >Explore More  </button>

1

Po prostu użyłem target = "_ blank" pod tagiem formularza i działało dobrze z FF i Chrome, gdzie otwiera się w nowym tagu, ale w IE otwiera się w nowym oknie.


1
Otwarcie karty lub okna zależy od opcji przeglądarki użytkownika. Nie wiem o IE, ale w większości przeglądarek strona internetowa nie może wybrać, czy łącze ma otwierać się w karcie, czy w oknie, ale użytkownik może to skonfigurować.
joeytwiddle


-1

Wypróbuj ten HTML:

<input type="button" value="Button_name" onclick="window.open('LINKADDRESS')"/>

-5

Nie możesz. To zachowanie jest dostępne tylko dla wtyczek i może być konfigurowane tylko przez użytkownika.


-5
<BUTTON NAME='my_button' VALUE=sequence_no TYPE='SUBMIT' style="background-color:transparent ; border:none; color:blue;" onclick="this.form.target='_blank';return true;"><u>open new page</u></BUTTON>

Ten przycisk będzie wyglądał jak adres URL i można go otworzyć w nowej karcie.


musisz dodać „formularz”
nerkn

Nie jest dobrym pomysłem (mówiąc semantycznie) posiadanie przycisku, który zachowuje się jak łącze. Zamiast tego użyj atagu.
Henrique Schreiner

-6

UŻYJ tego kodu

function openBackWindow(url,popName){
        var popupWindow = window.open(url,popName,'scrollbars=1,height=650,width=1050');
          if($.browser.msie){
            popupWindow.blur();
            window.focus();
        }else{
           blurPopunder();
        }
      };

    function blurPopunder() {
            var winBlankPopup = window.open("about:blank");
            if (winBlankPopup) {
                winBlankPopup.focus();
                winBlankPopup.close()
            }
    };

Działa dobrze w Mozilli, IE i Chrome w wersji poniżej 22; ale nie działa w Operze i Safari.


2
To nie jest najlepsza odpowiedź! Solidne -1.
Shougo Makishima,

1
Użycie tego kodu nie jest tak naprawdę odpowiedzią i nie masz za tym żadnej motywacji.
Edeph
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.