ไฮเปอร์ลิงก์ที่สอดคล้องกับมาตรฐานเว็บ

ใน HTML 4.0 Strict และ XHTML 1.0 STRICT แอตทริบิวต์เป้าหมายไม่ได้รับอนุญาตให้ใช้ในแท็ก <a> ซึ่งเป็นสิ่งที่น่าหงุดหงิดสำหรับนักออกแบบเว็บไซต์ ยังคงได้รับอนุญาตในข้อกำหนดเฉพาะการเปลี่ยนผ่าน แต่ด้วยวิธีการบางอย่าง เราทำเช่นนี้ ปัญหาสามารถแก้ไขได้

คุณลักษณะเป้าหมายถูกลบออกจากข้อกำหนด HTMl4.0 แต่ได้เพิ่มคุณลักษณะอื่น: rel คุณลักษณะนี้ใช้เพื่อระบุความสัมพันธ์ระหว่างเอกสารที่มีลิงก์และเอกสารที่เชื่อมโยงไว้ ค่าแอตทริบิวต์ของมันถูกกำหนดไว้ในข้อกำหนด (เช่น :ถัดไป, ก่อนหน้า, บท, ส่วน) คุณลักษณะเหล่านี้ส่วนใหญ่จะใช้เพื่อกำหนดความสัมพันธ์ระหว่างส่วนเล็กๆ ในเอกสารขนาดใหญ่ จริงๆ แล้วข้อกำหนดนี้ทำให้นักพัฒนาสามารถใช้ค่าแอตทริบิวต์ที่ไม่เป็นมาตรฐานเพื่อทำเฉพาะได้อย่างอิสระ แอปพลิเคชัน.

ที่นี่ เราใช้ค่าที่กำหนดเองภายนอกสำหรับแอตทริบิวต์ rel เพื่อทำเครื่องหมายลิงก์เพื่อเปิดหน้าต่างใหม่

รหัสลิงค์ที่ไม่สอดคล้องกับมาตรฐานเว็บล่าสุด:

<a href=document.html target=_blank>ลิงก์ภายนอก</a>

ใช้แอตทริบิวต์ rel:

<a href=document.html rel=external>ลิงก์ภายนอก</a>

ตอนนี้เราได้สร้างลิงก์ไปยังหน้าต่างใหม่ที่สอดคล้องกับมาตรฐานเว็บแล้ว เราจำเป็นต้องใช้ JavaScript เพื่อใช้งานหน้าต่างใหม่ สิ่งที่สคริปต์ต้องทำคือค้นหาสิ่งเหล่านั้นทั้งหมดในเอกสารที่เรากำหนดไว้เป็น rel=external เมื่อโหลดหน้าเว็บแล้ว

ก่อนอื่นเราต้องกำหนดเบราว์เซอร์

ถ้า (!document.getElementsByTagName) กลับมา;

getElementsByTagName เป็นวิธีการที่ใช้งานง่ายในมาตรฐาน DOM1 และขณะนี้เบราว์เซอร์ส่วนใหญ่รองรับ เนื่องจากเบราว์เซอร์รุ่นเก่าบางรุ่น เช่น Netscape 4 และ IE4 ไม่รองรับ DOM1 เราจึงต้องแยกแยะออกด้วยการพิจารณาว่าวิธีนี้มีอยู่หรือไม่ เบราว์เซอร์เวอร์ชันเก่าเหล่านี้

ต่อไป เราได้รับแท็ก <a> ทั้งหมดในเอกสารผ่านเมธอด getElementsByTagName:

จุดยึด var = document.getElementsByTagName(a);

Anchors ถูกกำหนดให้เป็นอาร์เรย์ที่มีแต่ละแท็ก <a> ตอนนี้เราต้องวนซ้ำแต่ละแท็ก <a> และแก้ไข:

สำหรับ (var i=0; i < anchors.length; i++) {

var สมอ = จุดยึด;

ค้นหาแท็ก <a> เพื่อใช้หน้าต่างใหม่

ถ้า (anchor.getAttribute(href) &&

anchor.getAttribute(rel) == ภายนอก)

ถัดไป สร้างเป้าหมายค่าแอตทริบิวต์และกำหนดค่า _target:

สมอ.เป้าหมาย = _blank;

รหัสที่สมบูรณ์:

-

ฟังก์ชั่น externalLinks() {

ถ้า (!document.getElementsByTagName) กลับมา;

จุดยึด var = document.getElementsByTagName(a);

สำหรับ (var i=0; i<anchors.length; i++) {

var สมอ = จุดยึด;

ถ้า (anchor.getAttribute(href) &&

anchor.getAttribute(rel) == ภายนอก)

สมอ.เป้าหมาย = _blank;

-

-

window.onload = ลิงค์ภายนอก;