บ๊ายบาย target blank บน XHTML 1.0 Strict
หัวข้อ บทความ แทก DOM | JavaScript | XHTML
HTML ดั่งเดิมนั้นถ้าเราอยากจะ Link ออกไป Website อื่นหรือให้เปิดหน้าต่างใหม่ เราก็จะระบุ target blank ดังตัวอย่าง
<a href="http://www.artracingshop.com" target="_blank">artracingshop.com</a>
ที่นี้เมื่อโลกหมุนไป มาตรฐานปรับเปลี่ยน ใช้ XHTML 1.0 Strict ปรากฏว่ามันไม่อนุญาตให้ใช้ target blank ครับ
ตามความเข้าใจของผมเอง XHTML 1.0 Strict ออกแบบโครงสร้างของภาษาให้รัดกุมขึ้นเพื่อให้ device หลายๆชนิดสามารถเปิดและแสดงผลได้อย่างถูกต้อง
ลองนึกดู ถ้า เครื่องเล่นเกม WII เปิด Browser แล้วเจอ Target Blank เด้งๆมาหลายหน้าต่างหรือ Browser ใน Nokia จอ นิ้วเดียว มันจะแบ่งการแสดงผลยังไง target blank ในมุมมองผมก็เลยน่าจะมีปัญหามาตรงนี้
แล้วทางแก้สำหรับ Website ตามปกติล่ะ
1. อย่าใช้ XHTML 1.0 Strict ครับ ฮา กำปั่นทุบดินเลย ไปใช้ XHTML 1.0 Transitional ก็พอ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. แต่ส่วนใหญ่คนที่อุตสาห์ใช้ XHTML 1.0 Strict ก็อยากจะโชว์เหนือกันทั้งนั้น มันเป็นค่านิยมสำหรับคนเขียน CSS Design น่ะครับว่า ต้องผ่าน W3C ของ XHTML 1.0 Strict ให้ได้ประมาณว่า เท๊พ เทพ
ไปดูครับอุปกรณ์ช่วยสำหรับท่านเทพ เจอมาจาก
http://www.sitepoint.com/article/standards-compliant-world/3
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
save เก็บไว้เป็น external.js ก็ได้ แล้วเอา ไปแปะไว้ใน <head>
<script type="text/javascript" src="external.js"></script>
Function ดังกล่าวจะทำการ Load เข้าเมื่อเริ่มเปิดหน้า web และจะทำงานลักษณะ DOM จะไต่หา tag <a href=""> ดูว่ามีการระบุ
relative ไว้ว่า external หรือเปล่า ถ้ามี มันจะเปลี่ยน target ของ link นั้นให้เป็น _blank แทน
ซึ่งการทำงานส่วนนี้เป็นหน้าที่ของ Javascript ไม่เกี่ยวกับมาตรฐาน XHTML 1.0 Strict พูดง่ายๆคือ
หน้าตา XHTML ถูกมาตรฐาน แต่ผลลัพธ์โดนแปลงร่างเป็น target Blank เอาไว้ด้วย javascript
เวลาเรียกใช้งาน ก็
<a href="http://www.artracingshop.com" rel="external">artracingshop.com</a>
แค่นี้ก็เป็น target blank ได้เหมือนเดิมแล้ว
ปล.ใครตามบทความนี้ไม่ทัน แนะนำให้เริ่มศึกษา CSS Design ได้แล้วนะครับ ^^
Read (3,142)
Comments (6)
2008-01-29 13:40:30
ความคิดเห็น
มีอีกวิธีนึงน่าจะเหมาะสมกว่าใช้ Javascript นะครับ
เห็นเค้าแก้ DTD เอาเลย
http://forums.mozillazine.org/viewtopic.php?p=150478&sid=b3fb156fcbac7245f07c20b49fd51987#150478
ตัวอย่างเว็บนี้เลยครับ
http://golem.ph.utexas.edu/~distler/blog/files/zeldman.html
โดยคุณ Anu
2008-01-29 21:40:29
ปกติผมใช้ง่าย ๆ ครับ add event onclick ใน tag a เลย มันก็จะเปิดหน้าต่างใหม่เมื่อกด
แล้วก็ valid XHTML 1.0 Strict
<a href="http://www.abcde.com" onclick="window.open(this.href);return false;">abcde</a>
โดยคุณ iake
2008-01-30 10:53:53
ของคุณ Anu น่าสนใจครับ เดี๋ยวผมขอศึกษาเรื่อง DTD อีกที ยอมรับว่าไม่เคยจับเลย
ของคุณ iake อันนั้นเป็นวิธีแรกที่ผมใช้ครับ ^^ พักหลังรู้สึกทุเรศตัวเอง เพราะ code มันรกมาก ดูแล้วไม่สบายตาเลย งานพักหลังผมจะพยายามลด style sheet inline , javascript บน link ต่างๆออกหมด หัดไปใ้ช้ DOM ให้มาก พัฒนาตัวเองด้วยน่ะครับ
แต่จริงๆไม่ต้องคิดมากก็ได้ ถ้าไม่ใช่พวกโรคจิต ติดเทพ จริงๆ ฮา
โดยคุณ 9AuM
2008-01-30 10:59:32
เขียน Strict ก็หาว่าโรคจิต ฮ่าๆๆ
เด๋วนี้เค้าฮิต "พอเพียง"
โดยคุณ 9korn
2008-02-05 13:03:56
แจ่มมากเลยคับ อ่านทีแรก นึกว่าไม่มีทางแก้ซะแล้ว
โดยคุณ SuN
2008-02-10 15:58:55
xhtml เค้ากะจะเอาไว้ใช้กับ web browser ในอุปกรณ์พกพา เช่นมือถือแบบที่มีหน้าจอและการแสดงผลจำกัดครับ เพราะไม่รองรับการเปิดหน้าใหม่ขึ้นมา โดยใช้ target เป็น blank แต่ปัจจุบันมือถือ Symbian 9.x smartphone และ PDA/Pocket PC ต่างก็มี web browser รองรับ html ที่มีความเกือบสมบูรณ์ ดังนั้น xhtml จึงมีบทบาทน้อยลง แต่ xhtml นี่เป็นภาษาที่เคร่งครัดมาก ตามระเบียบ xml ดังนั้นเว็บที่เขียนถูกต้องตาม xhtml นี่ก็เป็นเว็บสุดยอดระเบียบจัดเลยทีเดียว
โดยคุณ wml+xhtml
2008-03-28 16:09:47