Javascript - เปิด URL ที่กำหนดในแท็บใหม่โดยคลิกปุ่ม


109

ฉันต้องการมีปุ่มที่เปลี่ยนเส้นทางไปยัง URL ที่กำหนดและเปิดในแท็บใหม่ จะทำได้อย่างไร?

คำตอบ:


145

ใช้สิ่งนี้:

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

ทำงานให้ฉันและจะเปิดหน้าต่าง 'ป๊อปอัป' ใหม่จริงแทนที่จะเป็นเบราว์เซอร์หรือแท็บใหม่ คุณยังสามารถเพิ่มตัวแปรเพื่อหยุดไม่ให้แสดงลักษณะเฉพาะของเบราว์เซอร์ได้ดังนี้:

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

2
@ wong2 อาจจะอยากเปลี่ยนคำตอบเป็นอันนี้ สิ่งที่เลือกในปัจจุบันนั้นไกลเกินกว่าจะมีประสิทธิภาพ
CSS


29

การเพิ่ม target = "_ blank" ควรทำดังนี้

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

3
ฉันเข้าใจแล้วขอโทษที่พลาดไป คุณสามารถจัดรูปแบบลิงก์ให้ดูเหมือนปุ่มได้ หากคุณใช้ jQuery UI เพียงแค่ใช้ปุ่มเพื่อทำเช่นนั้น
Tim Büthe

1
ทางออกที่ยอดเยี่ยมสำหรับพวกเราส่วนใหญ่ที่เอาแต่ตะลุยออกแบบเว็บ! ขอบคุณ!
SMBiggs

1
+1 เนื่องจากคุณให้ทางออกที่ดีสำหรับผู้ที่มองหาคำตอบ "เปิดลิงก์ในแท็บใหม่" แบบง่ายๆหากพวกเขาไม่ได้ใช้ปุ่ม
user295583058

สิ่งที่ฉันต้องการ ขอบคุณ
Shahrukh Anwar

+1 หากมีสิ่งใดเปิดหน้าในแท็บใหม่แสดงว่าเป็นลิงก์ที่มีเหตุผล<a>แท็กจึงเหมาะสม ควรใช้รูปแบบเพื่อให้ดูเหมือนปุ่ม
Kos

21

คุณสามารถลืมการใช้ JavaScript ได้เนื่องจากเบราว์เซอร์ควบคุมว่าจะเปิดในแท็บใหม่หรือไม่ ตัวเลือกที่ดีที่สุดคือทำสิ่งต่อไปนี้แทน:

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

สิ่งนี้จะเปิดในแท็บใหม่เสมอไม่ว่าไคลเอนต์จะใช้เบราว์เซอร์ใดเนื่องจากไฟล์ target="_blank"แอตทริบิวต์

หากคุณต้องการเพียงแค่เปลี่ยนเส้นทางโดยไม่มีพารามิเตอร์ไดนามิกคุณสามารถใช้ลิงก์ที่มีtarget="_blank"แอตทริบิวต์ตามที่ Tim Bütheแนะนำ


1
ทำงานได้ตามต้องการ (ทดสอบบน chrome, firefox, IE10) :)
Zeeshan

10

ใช้window.openแทนwindow.locationการเปิดหน้าต่างหรือแท็บใหม่ (ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์)

ซอของคุณใช้งานไม่ได้เนื่องจากไม่มีbuttonองค์ประกอบให้เลือก ลองinput[type=button]หรือให้ปุ่มและการใช้งานid#buttonId


10

วิธีที่ฉันต้องการมีข้อดีคือไม่มี JavaScript ฝังอยู่ในมาร์กอัปของคุณ:

CSS

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

HTML

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

ฉันเดาว่าฉันมีวิธีใหม่ที่ต้องการ
Halter

ฉันคิดว่าข้อนี้ตอบคำถามได้ถูกต้องมากกว่า +1 :)
Pramesh Bajracharya


1

ฉันเพิ่งใช้ target = "_ blank" ใต้แท็กแบบฟอร์มและทำงานได้ดีกับ FF และ Chrome ซึ่งจะเปิดในแท็กใหม่ แต่เมื่อใช้ IE จะเปิดในหน้าต่างใหม่


1
การเปิดแท็บหรือหน้าต่างนั้นขึ้นอยู่กับตัวเลือกเบราว์เซอร์ของผู้ใช้ ฉันไม่รู้เกี่ยวกับ IE แต่ในเบราว์เซอร์ส่วนใหญ่หน้าเว็บไม่สามารถเลือกได้ว่าลิงก์จะเปิดในแท็บหรือหน้าต่าง แต่ผู้ใช้สามารถกำหนดค่าได้
joeytwiddle



-5

คุณทำไม่ได้ ลักษณะการทำงานนี้ใช้ได้เฉพาะกับปลั๊กอินและผู้ใช้กำหนดค่าได้เท่านั้น


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

ปุ่มนี้จะดูเหมือน URL และสามารถเปิดได้ในแท็บใหม่


คุณต้องเพิ่ม "แบบฟอร์ม"
nerkn

ไม่ใช่ความคิดที่ดี (พูดตามความหมาย) ที่จะมีปุ่มสำหรับทำงานเหมือนลิงก์ ให้ใช้aแท็กแทน
Henrique Schreiner

-6

ใช้รหัสนี้

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

มันทำงานได้ดีใน Mozilla, IE และ chrome และเวอร์ชันน้อยกว่า 22 แต่ใช้ไม่ได้ใน Opera และ Safari


2
นี่ไม่ใช่คำตอบที่ดีที่สุด! ทึบ -1.
Shougo Makishima

1
ใช้รหัสนี้ไม่ใช่คำตอบจริงๆและคุณไม่มีแรงจูงใจเบื้องหลัง
Edeph
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.