Javascript - Buka URL tertentu di tab baru dengan mengklik tombol

109

Saya ingin memiliki tombol yang mengalihkan ke URL tertentu dan terbuka di tab baru. Bagaimana ini bisa dilakukan?

wong2
sumber

Jawaban:

144

Gunakan ini:

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

Bekerja untuk saya dan itu akan membuka jendela 'popup' baru yang sebenarnya daripada browser atau tab lengkap baru. Anda juga dapat menambahkan variabel ke dalamnya untuk menghentikannya menampilkan ciri-ciri browser tertentu sebagai berikut:

onclick="window.open(this.href,'popUpWindow','height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no'); return false;"
Luke Alderton
sumber
2
@ wong2 Mungkin ingin mengubah jawaban yang satu ini. Yang saat ini dipilih jauh untuk bertele-tele agar efisien.
CSS
54

Dalam javascript, Anda dapat melakukan:

window.open(url, "_blank");
satnam
sumber
29

Menambahkan target = "_ blank" seharusnya berhasil:

<a id="myLink" href="www.google.com" target="_blank">google</a>
Tim Büthe
sumber
3
Begitu, maaf aku melewatkannya. Nah, Anda bisa mengatur gaya tautan agar terlihat dan terasa seperti tombol. Jika Anda menggunakan jQuery UI cukup gunakan tombol untuk melakukannya.
Tim Büthe
1
Solusi terbaik bagi sebagian besar dari kita yang hanya mencoba-coba desain web! Terima kasih!
SMBiggs
1
+1 karena Anda memberikan solusi yang baik kepada mereka yang mencari jawaban sederhana "buka tautan di tab baru", jika mereka tidak menggunakan tombol.
pengguna295583058
Persis seperti yang saya inginkan. Terima kasih
Shahrukh Anwar
+1, jika sesuatu membuka halaman di tab baru, secara logis itu adalah tautan, jadi <a>tag itu sesuai. Gaya harus digunakan agar terlihat seperti tombol.
Kos
21

Anda dapat melupakan tentang menggunakan JavaScript karena browser mengontrol apakah itu terbuka di tab baru atau tidak. Pilihan terbaik Anda adalah melakukan sesuatu seperti berikut ini:

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

Ini akan selalu terbuka di tab baru terlepas dari browser mana yang digunakan klien karena target="_blank"atributnya.

Jika yang Anda butuhkan hanyalah mengalihkan tanpa parameter dinamis, Anda dapat menggunakan tautan dengan target="_blank"atribut seperti yang disarankan Tim Büthe.

Tony
sumber
1
Berfungsi sesuai kebutuhan (diuji pada chrome, firefox, IE10) :)
Zeeshan
10

Gunakan window.openalih-alih window.locationuntuk membuka jendela atau tab baru (tergantung pada pengaturan browser).

Biola Anda tidak berfungsi karena tidak ada buttonelemen untuk dipilih. Coba input[type=button]atau berikan tombol iddan gunakan #buttonId.

James Allardice
sumber
10

Metode pilihan saya memiliki keuntungan karena tidak ada JavaScript yang disematkan di markup Anda:

CSS

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

HTML

<a href="http://example.com" target="_blank"><input type="button" value="Link-button"></a>
SpyderScript
sumber
Saya rasa saya punya metode baru yang disukai.
Halter
Saya rasa yang satu ini menjawab pertanyaan dengan lebih tepat. +1 :)
Pramesh Bajracharya
3

Buka di tab baru menggunakan javascript

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

Saya baru saja menggunakan target = "_ blank" di bawah tag formulir dan berfungsi dengan baik dengan FF dan Chrome di mana ia terbuka di tag baru tetapi dengan IE itu terbuka di jendela baru.

Obaidul Hye
sumber
1
Apakah tab atau jendela terbuka ditentukan oleh opsi browser pengguna. Saya tidak tahu tentang IE, tetapi di sebagian besar browser, halaman web tidak dapat memilih apakah link terbuka di tab atau jendela, tetapi pengguna dapat mengkonfigurasinya.
joeytwiddle
0

coba ini

<a id="link" href="www.gmail.com" target="_blank" >gmail</a>
Cintai Kumar
sumber
-1

Coba HTML ini:

<input type="button" value="Button_name" onclick="window.open('LINKADDRESS')"/>
raj mori
sumber
-5

Tidak boleh. Perilaku ini hanya tersedia untuk plugin dan hanya dapat dikonfigurasi oleh pengguna.

ckruse.dll
sumber
-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>

Tombol ini akan terlihat seperti URL dan dapat dibuka di tab baru.

Jolene
sumber
Anda perlu menambahkan "formulir"
nerkn
Bukan ide yang baik (secara semantik) memiliki tombol untuk berperilaku seperti tautan. Sebagai gantinya, gunakan atag.
Henrique Schreiner
-6

GUNAKAN kode ini

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

IT berfungsi dengan baik di Mozilla, IE, dan chrome dan kurang dari 22 versi; tetapi tidak berfungsi di Opera dan Safari.

Lalit Guglani
sumber
2
Ini bukan jawaban terbaik! Solid -1.
Shougo Makishima
1
Gunakan kode ini sebenarnya bukan jawaban dan Anda tidak memiliki motivasi di baliknya.
Edeph