Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 8

บ๊ายบาย 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 (16,557) Comments (10) 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 โดยคุณ 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 โดยคุณ iake 2008-01-30 10:53:53

ของคุณ Anu น่าสนใจครับ เดี๋ยวผมขอศึกษาเรื่อง DTD อีกที ยอมรับว่าไม่เคยจับเลย

ของคุณ iake อันนั้นเป็นวิธีแรกที่ผมใช้ครับ ^^ พักหลังรู้สึกทุเรศตัวเอง เพราะ code มันรกมาก ดูแล้วไม่สบายตาเลย งานพักหลังผมจะพยายามลด style sheet inline , javascript บน link ต่างๆออกหมด หัดไปใ้ช้ DOM ให้มาก พัฒนาตัวเองด้วยน่ะครับ

แต่จริงๆไม่ต้องคิดมากก็ได้ ถ้าไม่ใช่พวกโรคจิต ติดเทพ จริงๆ ฮา

รูปคุณ 9AuM โดยคุณ 9AuM 2008-01-30 10:59:32


http://www.servdd.com Web Hosting คุณภาพบริหารงานโดยนายอ้ำ
http://www.wp4seo.com wp4SEO ระบบช่วยบริหาร Wordpress Blog จำนวนมาก
http://www.welovetopup.com weLoveTopup เติมเงินออนไลน์ให้ส่วนลดมากที่สุดในตลาด

เขียน Strict ก็หาว่าโรคจิต ฮ่าๆๆ
เด๋วนี้เค้าฮิต "พอเพียง"

รูปคุณ 9korn โดยคุณ 9korn 2008-02-05 13:03:56

แจ่มมากเลยคับ อ่านทีแรก นึกว่าไม่มีทางแก้ซะแล้ว

รูปคุณ SuN โดยคุณ 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 โดยคุณ wml+xhtml 2008-03-28 16:09:47

ขอยอมรับเลยคับ ผมตามไม่ทัน จริงๆ
CSS Design ได้เลย

ไปหาลุง google ก่อน เดวมาอ่านต่อ

รูปคุณ melloz โดยคุณ melloz 2008-08-01 15:00:52

ดีดี

รูปคุณ อิอิ โดยคุณ อิอิ 2008-10-10 21:32:35

ขอบคุณสำหรับเทคนิคดีๆ นะครับ ตั้งแต่ผมเขียนเว็บมาไม่เคย validate กับ W3C เลย แบบว่าชอบเขียนตามสะดวกมากกว่า ขอให้แสดงผลบนหน้าเว็บได้ก็พอใจแล้ว

รูปคุณ เอก โดยคุณ เอก 2008-10-19 23:31:39

ขอบคุณมากคับบบบ ที่มีประโยชน์กับผมมากก็คือ

<a href="เติมURLหน้าที่ต้องการให้ไป" target="_blank">หัวข้อโชว์ หรือตัวหนังสือเชิญให้คลิก(เช่น คลิกที่นี่)</a>

แล้วไปวางใน หน้าแก้ไขHTML แค่นี้ก็ไปโลดแล้ว หาวิธีมาทั้งวัน เพิ่งรู้วันนี้ ว่าปกติแบบบ้านๆ เค้าทำงี้กัน

ขอบคุณมั่กๆ

รูปคุณ พี่หมา โดยคุณ พี่หมา 2009-06-17 21:10:02

ร่วมแสดงความคิดเห็น



ขอความกรุณา ปัญญาชน ทุกๆท่าน รณรงค์การใช้ภาษาไทยให้ถูกต้อง
กรุณา ลงความคิดเห็นโดยใช้ภาษาไทยให้เป็นภาษาไทย งดการใช้ภาษาวัยรุ่น,
แอ๊บแบ๊ว บอกตรงๆปัญญาอ่อน !! Admin นั่งอ่านแล้วปวดหัว

เข้าระบบ


จำไว้ด้วยนะจ้ะ

สมัครสมาชิก
ลืมรหัสผ่าน

บทความล่าสุด

Gallery

Tags

HTML barcampbkk2 Yahoo About me Notebook Apache FTR ล้อหมอบ เฟรม OEM barcampbangkok2 SMS SEO WordPress PHP Windows Ajax Motorcycle bicycle จักรยาน Blog CSS Lenovo Security Web2.0 DOM ROM Developer MySQL ASP Android

อื่นๆ ...

เพื่อนบ้าน

สถิติส่วนตัว

คลิกรับ Feed สิจ๊ะ

TwitterCounter for @9aum

Scriptdd.com | ctdd Version 3.0 ติดต่อฐานข้อมูลทิ้งสิ้น 6 ครั้งใช้เวลาประมวลผล 0.0713 วินาที
โปรแกรมโดย 9AuM | ออกแบบโดย styleshout