วิธีจำลองเป้าหมาย =“ _ blank” ใน JavaScript


156

เมื่อผู้ใช้คลิกที่ลิงค์ฉันจำเป็นต้องอัปเดตฟิลด์ในฐานข้อมูลแล้วเปิดลิงก์ที่ร้องขอในหน้าต่างใหม่ การอัปเดตนั้นไม่มีปัญหา แต่ฉันไม่รู้วิธีเปิดหน้าต่างใหม่โดยไม่ต้องการให้พวกเขาคลิกที่ไฮเปอร์ลิงก์อื่น

<body onLoad="document.getElementById('redirect').click">
<a href="http://www.mydomain.com?ReportID=1" id="redirect" target="_blank">Report</a>
</body>

1
หืม? target="_top"ไม่เปิดในหน้าต่างใหม่ - target="_blank"ทำ
Tomalak

หากลิงก์นั้นเปิดขึ้นในหน้าต่างใหม่ (เนื่องจาก target = "_ blank") และตัวจัดการการคลิกจาวาสคริปต์กำลังอัปเดตฐานข้อมูลของคุณอยู่แล้วทำไมคุณต้องเปิดหน้าต่างใหม่ด้วย Javascript เลย?
Joel Mueller

คำตอบ:


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

พารามิเตอร์ที่สองเป็นทางเลือกและเป็นชื่อของหน้าต่างเป้าหมาย


2
window.openทำอะไรtarget="_blank"- เปิด URL ในหน้าต่างใหม่
ceejayoz

3
ใช่. อาร์กิวเมนต์ที่สองเพื่อ window.open () คือ "ชื่อ" ที่คุณต้องการให้หน้าต่างซึ่งคล้ายกับการตั้งค่าเป้าหมายในลิงค์ developer.mozilla.org/En/DOM:window.open
Omer Bokhari

2
อ้อเข้าใจแล้ว. window.open ถูกบล็อกโดยตัวบล็อกป็อปอัพของ Firefox แต่เป้าหมาย = "_ blank" ไม่ใช่ ฉันควรขอให้ลูกค้าเปิดใช้งานป๊อปอัปจากเว็บไซต์ของตนเองหรือไม่
Phillip Senn

7
มีโซลูชัน JavaScript ที่ไม่ได้รับการบล็อคจากตัวบล็อกป็อปอัพเช่นเดียวกับ Firefox หรือไม่?
ma11hew28

4
@MattDiPasquale การปิดกั้น window.open เป็นจุดของตัวบล็อกป๊อปอัพ! หากคุณโทรติดต่อเพื่อตอบสนองต่อการคลิกก็มีโอกาสที่จะไม่ถูกบล็อก
William Denniss

19

สิ่งนี้อาจช่วยได้

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

IE11: "ข้อผิดพลาดรันไทม์ Javascript: ไม่ใช่การกระทำที่ถูกต้องสำหรับวัตถุ"
T-moty

8
คำตอบนี้สามารถปรับปรุงได้โดยการเพิ่มคำอธิบายของสิ่งที่เกิดขึ้น
Elly โพสต์

13

ฉันรู้ว่านี่เป็นข้อตกลงที่ทำเสร็จแล้ว แต่นี่คือสิ่งที่ฉันใช้เพื่อแก้ไขปัญหาในแอปของฉัน

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

โดยทั่วไปสิ่งที่เกิดขึ้นที่นี่ฉันเรียกใช้การตรวจสอบว่ามีการเชื่อมโยง target=_blankคุณสมบัติ หากไม่เป็นเช่นนั้นก็จะหยุดการเชื่อมโยงจากการเรียกใช้ตั้งค่าให้เปิดในหน้าต่างใหม่จากนั้นคลิกโดยทางโปรแกรม

คุณสามารถไปอีกขั้นหนึ่งและข้ามการหยุดคลิกต้นฉบับ (และทำให้โค้ดของคุณมีขนาดกะทัดรัดขึ้น) โดยลองทำสิ่งนี้:

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

หากคุณใช้ jQuery เพื่อย่อการปรับใช้ข้ามแอตทริบิวต์ให้กับเบราว์เซอร์คุณควรใช้สิ่งนี้แทนe.target.setAttribute("target", "_blank"):

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

คุณอาจต้องทำใหม่เพื่อให้เหมาะกับการใช้งานจริงของคุณ แต่นี่คือวิธีที่ฉันขีดข่วนคันของฉันเอง

นี่คือตัวอย่างของการดำเนินการเพื่อให้คุณยุ่งกับ

(ลิงก์ใน jsfiddle กลับมาที่การสนทนานี้ .. ไม่จำเป็นต้องมีแท็บใหม่ :))


1
ฉันชอบคำตอบนี้มากกว่าเพราะใช้ jQuery และหลีกเลี่ยงปัญหาตัวบล็อกป็อปอัพ window.open สิ่งนี้ถูกต้องตามกฎหมายอย่างสมบูรณ์เมื่อจัดการกับข้อมูลบุคคลที่สามที่มีลิงก์ซึ่งขาดเป้าหมาย
IncredibleHat

7

ฉันชอบใช้รหัสต่อไปนี้ถ้ามันเป็นลิงค์เดียว มิฉะนั้นอาจเป็นการดีที่สุดถ้าคุณสร้างฟังก์ชันด้วยโค้ดที่คล้ายกัน

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

ฉันเริ่มใช้สิ่งนั้นเพื่อข้ามการทดสอบ XHTML ที่เข้มงวดของ W3C


1
ฉันคิดว่า JavaScript แบบอินไลน์ยุ่งกว่าการเพิ่มแอตทริบิวต์ "ที่ไม่ได้มาตรฐาน" ซึ่งใช้งานได้ทุกที่
Matti Virkkunen

@MattiVirkkunen ในบางสถานการณ์มันเป็นทางออกเดียว
Claudiu Creanga

1
@Claudiu: หากคุณพบว่าตัวเองอยู่ในสถานการณ์ที่ไร้สาระเช่นนี้คุณควรแก้ไขสาเหตุมากกว่า kludge รอบ ๆ มัน
Matti Virkkunen

5

นี่คือวิธีที่ฉันทำกับ jQuery ฉันมีคลาสสำหรับแต่ละลิงก์ที่ฉันต้องการเปิดในหน้าต่างใหม่

$(function(){

    $(".external").click(function(e) {
        e.preventDefault();
        window.open(this.href);
    });
});


1

นี่อาจช่วยคุณในการเปิดลิงค์ของหน้าทั้งหมด :

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

มันจะเปิดทุก<a href="" class="myClass"></a>รายการลิงก์ไปยังแท็บอื่นเช่นคุณจะคลิกแต่ละรายการ

คุณจะต้องวางลงในคอนโซลของเบราว์เซอร์ จำเป็นต้องใช้เฟรมเวิร์ก jQuery

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