จะเปิดลิงค์ในแท็บใหม่บน html ได้อย่างไร

390

ฉันกำลังทำงานในโครงการ HTML และฉันไม่สามารถหาวิธีเปิดลิงก์ในแท็บใหม่โดยไม่มีจาวาสคริปต์

ฉันรู้อยู่แล้วว่า<a href="http://www.WEBSITE_NAME.com"></a>เปิดลิงค์ในแท็บเดียวกัน ความคิดใดที่จะทำให้มันเปิดในใหม่ได้หรือไม่

— ZenthyxProgramming
แหล่งที่มา

40

ใช้<a href="url" target="_blank">...</a>

— Rohit Agrawal

1

ตามที่ Rohit พูดให้เพิ่ม param target = "_ blank" อย่างไรก็ตามบน FireFox อย่างน้อยถ้าคุณทำสองขีดล่าง target = "__ blank" มันจะเปิดขึ้นในแท็บใหม่ แต่การคลิกลิงก์อื่น ๆ โดยใช้เครื่องหมายขีดล่างคู่เดียวกันเปิดใหม่ หน้าในแท็บใหม่ก่อนหน้าซึ่งหมายความว่าคุณเปิดได้เพียงหนึ่งแท็บเพิ่มเติม

— Justin Levene

599

ตั้งค่าแอตทริบิวต์ 'เป้าหมาย' ของลิงก์เป็น_blank:

<a href="#" target="_blank" rel="noopener noreferrer">Link</a>

แก้ไข: สำหรับตัวอย่างอื่น ๆ ดูที่นี่: http://www.w3schools.com/tags/att_a_target.asp

(หมายเหตุ: ก่อนหน้านี้ฉันแนะนำblankแทนที่จะเป็น_blankเพราะหากใช้แล้วมันจะเปิดแท็บใหม่แล้วใช้แท็บเดียวกันหากมีการคลิกลิงก์อีกครั้งอย่างไรก็ตามนี่เป็นเพราะเมื่อ GolezTrol ชี้ให้เห็นมันหมายถึงชื่อ a ของเฟรม / หน้าต่างซึ่งจะถูกตั้งค่าและใช้เมื่อกดลิงค์อีกครั้งเพื่อเปิดในแท็บเดียวกัน)

การพิจารณาความปลอดภัย!

rel="noopener noreferrer"คือการป้องกันที่เพิ่งเปิดใหม่แท็บจากความสามารถในการปรับเปลี่ยนแท็บเดิมโดยมีเจตนาร้าย ดูข้อมูลเพิ่มเติมเกี่ยวกับช่องโหว่นี้ได้จากแหล่งข้อมูลเหล่านี้:

— SharkofMirkwood
แหล่งที่มา

16

เป้าหมายพิเศษทั้งหมดเริ่มต้นด้วยการขีดเส้นใต้ blankจะเป็นชื่อของเฟรมหรือหน้าต่าง อาจใช้งานได้เนื่องจากหน้าต่างหรือแท็บใหม่อาจเปิดขึ้นเมื่อไม่มีชื่อว่างไว้ แต่การคลิกลิงค์ที่สองควรเปิดหน้าในแท็บเดียวกันนั้นอีกครั้งแทนที่จะเปิดขึ้นมาใหม่

— GolezTrol

2

ฉันคิดว่ามันไม่ถูกต้องมันต่างกัน แทนที่จะคิดว่าblankคุณสามารถใช้เช่นกันได้fooฉันคิดว่า_blankจริงๆแล้วมีความหมายพิเศษ ฉันไม่พบข้อมูลใด ๆ เพื่อพิสูจน์เป็นอย่างอื่น คุณสามารถ?

— GolezTrol

2

@tefan ไม่_blankจะไม่เป็นไร แต่ละลิงก์จะเปิดในแท็บอื่น หากคุณระบุชื่อที่ไม่มีเครื่องหมายขีดเส้นใต้ (เช่นblank) ลิงก์จะเปิดในแท็บเดียวกัน

— SharkofMirkwood

6

เคล็ดลับ: ระวังช่องโหว่เนื่องจาก _blank ข้อมูลเพิ่มเติมmedium.com/@jitbit/ …

— Aistis

1

อีกหน้าหนึ่งที่มีช่องโหว่mathiasbynens.github.io/rel-noopenerซึ่งเป็นตัวอย่างด้วยตัวมันเอง

— PhoneixS

99

ใช้หนึ่งในสิ่งเหล่านี้ตามความต้องการของคุณ

เปิดเอกสารที่เชื่อมโยงในหน้าต่างหรือแท็บใหม่:

 <a href="xyz.html" target="_blank"> Link </a>

เปิดเอกสารที่เชื่อมโยงในเฟรมเดียวกับที่คลิก (นี่เป็นค่าเริ่มต้น):

 <a href="xyz.html" target="_self"> Link </a>

เปิดเอกสารที่ลิงก์ในเฟรมพาเรนต์:

 <a href="xyz.html" target="_parent"> Link </a>

เปิดเอกสารที่เชื่อมโยงในเนื้อหาแบบเต็มของหน้าต่าง:

 <a href="xyz.html" target="_top"> Link </a>

เปิดเอกสารที่เชื่อมโยงในกรอบชื่อ:

 <a href="xyz.html" target="framename"> Link </a>

ดู MDN

— ผู้เรียนเสมอ
แหล่งที่มา

ขอบคุณสำหรับข้อมูล. วิธีการเปิดลิงค์ในแท็บใหม่เมื่อคลิก?

— Shajeel Afzal

ใช้รหัสใน html ตามที่แบ่งปันข้างต้น เบราว์เซอร์ใหม่ส่วนใหญ่จะเปิดลิงก์ในแท็บใหม่ตามค่าเริ่มต้นเมื่อคุณใช้ target = "_ blank"

— ผู้เรียนเสมอ

1

มีในใจที่target="_blank"มีช่องโหว่คุณสามารถอ่านเกี่ยวกับเรื่องนี้ในmathiasbynens.github.io/rel-noopener

— PhoneixS

36

หากคุณต้องการที่จะทำให้คำสั่งหนึ่งครั้งสำหรับทั้งเว็บไซต์ของคุณแทนที่จะต้องทำมันหลังจากทุกลิงค์ ลองที่นี่ภายในหัวหน้าเว็บไซต์ของคุณและบิงโก

<head>
<title>your text</title>
<base target="_blank" rel="noopener noreferrer">
</head>

หวังว่านี่จะช่วยได้

— Cyberquill
แหล่งที่มา

3

อย่าลืมเพิ่ม rel = "noopener noreferrer"

— นักปราชญ์ Blundering

13

การใช้target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>

— อีวานฮาห์น
แหล่งที่มา

3

อย่าลืมที่จะเพิ่ม rel = "noopener noreferrer"

— นักปราชญ์ที่ผิดพลาด

6

ควรใช้เมื่อใดtarget='_blank':

เวอร์ชัน HTML (อุปกรณ์บางตัวไม่รองรับ):

<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

เวอร์ชัน JavaScript สำหรับอุปกรณ์ทั้งหมด:

การใช้ rel = "external" นั้นถูกต้องสมบูรณ์

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $('a[rel="external"]').attr('target', '_blank');
</script>

และสำหรับ Jquery สามารถลองกับหนึ่งด้านล่าง:

$("#content a[href^='http://']").attr("target","_blank");

หากการตั้งค่าเบราว์เซอร์ไม่อนุญาตให้คุณเปิดในหน้าต่างใหม่:

href = "google.com";
onclick="window.open (this.href, ''); return false";

— Kaleem Ullah
แหล่งที่มา

1

อย่าลืมเพิ่ม rel = "noopener noreferrer"

— นักปราชญ์ Blundering

6

target="_blank"คุณลักษณะจะทำงาน อย่าลืมเพิ่มrel="noopener noreferrer"เพื่อแก้ไขช่องโหว่ที่อาจเกิดขึ้น เพิ่มเติมเกี่ยวกับที่นี่: https://dev.to/ben/the-targetblank-vulnerability-by-example

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Searcher</a>

— Vadym P
แหล่งที่มา

อีกคำอธิบายเกี่ยวกับช่องโหว่ที่นี่: mathiasbynens.github.io/rel-noopener

— นักปราชญ์ที่ถูกโจมตี

2

คุณสามารถใช้ได้:

<a href="http://www.WEBSITE_NAME.com"  target="_blank"> Website</a>

อย่างไรก็ตามข้างต้นทำให้ไซต์ของคุณเสี่ยงต่อการถูกโจมตีด้วยฟิชชิง คุณสามารถป้องกันไม่ให้เกิดขึ้นในบางเบราว์เซอร์โดยเพิ่ม rel = "noopener noreferrer" ในลิงก์ของคุณ เมื่อเพิ่มสิ่งนี้แล้วตัวอย่างด้านบนจะกลายเป็น:

<a href="http://www.WEBSITE_NAME.com" rel="noopener noreferrer" target="_blank">Website.com</a>

ตรวจสอบข้อมูลเพิ่มเติมได้ที่: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

— Thabang
แหล่งที่มา

0

คุณสามารถทำได้เช่นนี้

<a href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">Open Duck</a>

ดูที่ URL ต่อไปนี้บนMDNสำหรับข้อมูลเพิ่มเติมเกี่ยวกับความปลอดภัยและความเป็นส่วนตัว:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Security_and_privacy

สิ่งใดบ้างที่มีลิงก์ไปยังบทความที่ดีชื่อว่าTarget = "_ blank" ซึ่งเป็นช่องโหว่ที่ประเมินต่ำที่สุด :

https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

— darmis
แหล่งที่มา