เมื่อต้องการนำผู้ใช้ไปหน้าเว็บภายนอก พฤติกรรมเริ่มต้นคือลิงก์เปิดในแท็บเดิม คุณสามารถเก็บผู้ใช้ไว้ในหน้าของคุณได้โดยเปิดลิงก์ภายนอกในแท็บใหม่ ทำให้กลับมาหน้าเดิมง่าย บทความนี้ครอบคลุมวิธีการ
ไวยากรณ์
<a href="https://placekitten.com/1000/1000" target="_blank" rel="noopener noreferrer">Click to See a Kitten!</a>
ฟีเจอร์นี้ตรงไปตรงมา ต้องเพิ่มแอตทริบิวต์ target ตั้งค่าเป็น _blank ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ จะเปิดในแท็บใหม่หรือหน้าต่างใหม่ แอตทริบิวต์ rel="noopener noreferrer" มี 2 ส่วน: หนึ่งซ่อนที่มาของผู้ใช้ และอีกส่วนป้องกันโจมตีร้าย
Noreferrer ป้องกัน SEO บันทึกที่มาของผู้ใช้ แสดงเป็น direct link แทน Noopener ป้องกัน HTML document ร้ายค้าจากเข้าถึง document ของคุณทำลาย
โค้ดเต็ม:
<html> <head> <link href="./style.css" type="text/css" rel="stylesheet" /> </head> <body> <a href="https://placekitten.com/1000/1000" target="_blank" rel="noopener noreferrer">Click on the link to See a Kitten!</a> </body> </html>
