บทเรียนที่ 11 การเปิดหน้าต่างใหม่
นี่เป็นบทแรก จากสองบท ที่ว่าด้วยเรื่องของการเปิดหน้าต่างใหม่ ในบทนี้จะพูดถึงคำสั่งจาวาสคริปที่ใช้ในการเปิดหน้าต่างใหม่ หน้าต่างที่เรียกได้ว่าเป็นเอกสาร(หรือไฟล์) HTML ลำดับที่สอง ต่อจากที่เปิดอยู่
ในบทถัดไปยังคงใช้เทคนิคเดิม แต่จะแสดงให้คุณเห็นว่า ทำอย่างไรจึงเปิดหน้าต่างแบบใช้ชุดคำสั่งได้ เพื่อที่จะให้ข้อมูลในหน้าต่างเก่า ไปขึ้นในหน้าต่างใหม่ หมายความว่าคุณไม่จำเป็นต้องสร้างเว็บสองหน้าเพื่อให้ได้สองหน้าต่าง แต่สร้างเพียงหน้าเดียว... แล้วจาวาสคริปจะช่วยแยกออกเป็นสองหน้าให้เอง
เรามาเริ่มที่พื้นฐานกันเถอะ...
สคริป...
<script language="javascript">
window.open('http://www.google.co.th', 'new', config='height=300,width=300')
</script>
window.open('http://www.google.co.th', 'new', config='height=300,width=300')
</script>
ผลของสคริปนี้
คุณเห็นผลของสคริปนี้ ในตอนแรกที่คุณเปิดเข้ามาในหน้านี้ หน้าต่างที่สองที่โผล่ออกมา เป็นเว็บไซท์ google
เรามาแยกโครงสร้างจาวาสคริปกันเถอะ
การวางตำแหน่งสคริปนี้
ขอพูดเรื่องการวางตำแหน่งก่อนนะครับ ผมเคยพูดอยู่เสมอว่า การวางจาวาสคริปควรวางไว้ในส่วนบนๆ ของไฟล์ HTML ซึ่งจะทำให้มันทำงานได้เร็ว แต่ในจุดนี้ผมอยากจะแนะนำสิ่งที่ต่างออกไป
หากคุณต้องการใช้คำสั่งเปิดหน้าต่างใหม่นี้ ให้คุณวางมันไว้ในตอนท้ายสุดของไฟล์ HTML เหตุผลนั้นง่ายครับ... หน้านั้นทั้งหมดจะโหลดจนเกือบหมด(เหลือคำสั่งเปิดหน้าต่างใหม่ ที่วางไว้ท้ายสุดไงครับ) และแสดงผลในหน้าจอก่อนที่หน้าต่างใหม่จะเปิดขึ้นมา ...แต่หากคุณใส่คำสั่งไว้ในตอนต้น หน้าต่างใหม่ก็จะโผล่ขึ้นมา ก่อนที่ผู้ใช้จะเห็นว่าหน้าต่างแรกมีอะไรบ้าง ซึ่งจะมีโอกาสที่ผู้ใช้จะปิดหน้าต่างแรกนั้น หรือลดความสนใจในหน้าต่างแรก
แต่นั้นเป็นเพียงความเห็นของผมครับ คุณสามารถวางไว้ที่จุดใดก็ได้ มันสามารถทำงานได้จากทุกแห่ง ผมคิดว่าถ้าหน้าต่างโผล่ขึ้นมาในตอนท้าย มันจะเป็นประโยชน์แก่คุณมากกว่า
กลับเข้าสู่การแยกโครงสร้างต่อครับ
ขอพูดเรื่องการวางตำแหน่งก่อนนะครับ ผมเคยพูดอยู่เสมอว่า การวางจาวาสคริปควรวางไว้ในส่วนบนๆ ของไฟล์ HTML ซึ่งจะทำให้มันทำงานได้เร็ว แต่ในจุดนี้ผมอยากจะแนะนำสิ่งที่ต่างออกไป
หากคุณต้องการใช้คำสั่งเปิดหน้าต่างใหม่นี้ ให้คุณวางมันไว้ในตอนท้ายสุดของไฟล์ HTML เหตุผลนั้นง่ายครับ... หน้านั้นทั้งหมดจะโหลดจนเกือบหมด(เหลือคำสั่งเปิดหน้าต่างใหม่ ที่วางไว้ท้ายสุดไงครับ) และแสดงผลในหน้าจอก่อนที่หน้าต่างใหม่จะเปิดขึ้นมา ...แต่หากคุณใส่คำสั่งไว้ในตอนต้น หน้าต่างใหม่ก็จะโผล่ขึ้นมา ก่อนที่ผู้ใช้จะเห็นว่าหน้าต่างแรกมีอะไรบ้าง ซึ่งจะมีโอกาสที่ผู้ใช้จะปิดหน้าต่างแรกนั้น หรือลดความสนใจในหน้าต่างแรก
แต่นั้นเป็นเพียงความเห็นของผมครับ คุณสามารถวางไว้ที่จุดใดก็ได้ มันสามารถทำงานได้จากทุกแห่ง ผมคิดว่าถ้าหน้าต่างโผล่ขึ้นมาในตอนท้าย มันจะเป็นประโยชน์แก่คุณมากกว่า
กลับเข้าสู่การแยกโครงสร้างต่อครับ
· window.open คำสั่งนี้ชัดเจนมากครับ.. window หรือหน้าต่าง คือตัวถูกกระทำ ส่วน open(แปลว่า เปิด) เป็นวิธีกระทำต่อหน้าต่าง นี่เป็นส่วนที่ง่ายครับ ต่อไป เราจะพูดถึงการปรับแต่งหน้าต่าง
· ('http://www.google.co.th', 'new', config='height=300,width=300')
สิ่งแรกที่ตามหลังวิธีกระทำก็จะเป็นวงเล็บเปิด และรูปแบบภายในของคำสั่งเปิดหน้าต่างใหม่ ก็จะเป็นดังนี้
สิ่งแรกที่ตามหลังวิธีกระทำก็จะเป็นวงเล็บเปิด และรูปแบบภายในของคำสั่งเปิดหน้าต่างใหม่ ก็จะเป็นดังนี้
(' URL หรือที่อยู่ ที่จะเป็นหน้าต่างใหม่ ', ' ชื่อหน้าต่างใหม่ ', config = ' ค่าต่างๆ ของหน้าต่าง ')
'http://www.google.co.th' คือ ที่อยู่ของเว็บไซท์กูเกิ้ล เป็นที่อยู่ของหน้าต่างที่จะเปิดใหม่ จะใส่เครื่องหมายคำพูดหุ้มแทนก็ได้ครับ
'new' คือ ชื่อของหน้าต่างใหม่ที่คุณ(ผม)ตั้งขึ้น ซึ่งจำเป็นต้องมี หากคิดจะแก้ไขหน้าต่างใหม่
config= บอกให้รู้ว่าสิ่งที่จะตามมาเป็นการแก้ไขค่าต่างๆของหน้าต่าง
หากไม่มีทั้ง 'new' และส่วนของ config= จะสามารถเขียนคำสั่งได้สั้นที่สุดคือ open=('http://www.google.co.th') ซึ่งจะเป็นการเปิดหน้าต่างใหม่แบบธรรมดา เหมือนกับ การเปิด link ในหน้าต่างใหม่ทั่วไป
'new' คือ ชื่อของหน้าต่างใหม่ที่คุณ(ผม)ตั้งขึ้น ซึ่งจำเป็นต้องมี หากคิดจะแก้ไขหน้าต่างใหม่
config= บอกให้รู้ว่าสิ่งที่จะตามมาเป็นการแก้ไขค่าต่างๆของหน้าต่าง
หากไม่มีทั้ง 'new' และส่วนของ config= จะสามารถเขียนคำสั่งได้สั้นที่สุดคือ open=('http://www.google.co.th') ซึ่งจะเป็นการเปิดหน้าต่างใหม่แบบธรรมดา เหมือนกับ การเปิด link ในหน้าต่างใหม่ทั่วไป
· 'height=300,width=300' คือ แก้ไขให้หน้าต่างที่เปิดใหม่ให้มีความสูง(height) 300 พิกเซล และมีความกว้าง(width) 300 พิกเซล สังเกตว่าระหว่างความกว้างและความสูงจะคั่นด้วยเครื่องหมายลูกน้ำ( , ) และไม่มีช่องว่างระหว่างนี้ รอบๆความกว้างและความสูงถูกปิดด้วยเครื่องหมายขีดเดียว... เหตุผลเพราะ คำสั่งทั้งสองนี้เป็นคำสั่งที่รองลงมาจาก config ดังนั้น คำสั่งทั้งสอง จึงต้องทำงานพร้อมกัน และถ้าเกิดมีช่องว่างขึ้นมา Browser จะคิดว่าคำสั่งจบแล้ว จะเกิด Error
คำสั่งแก้ไขหน้าต่างไม่ได้มีแต่เพียง ปรับความกว้างและความสูง แต่ยังมีคำสั่งอื่นๆ ที่ไม่ได้แก้ค่าเป็นตัวเลขเหมือนปรับความกว้างและสูง แต่ปรับโดยใช้ ค่า yes หรือ no (หรือคุณอาจใช้ เลข 1 แทนคำว่า yes และเลข 0 แทนคำว่า no ก็ให้ผลเช่นเดียวกันครับ) ข้างล่างนี่เป็นคำสั่งแก้ไขหน้าต่างแบบอื่นๆครับ อย่าลืมว่าห้ามมีช่องว่างระหว่างคำสั่งนะครับ
คำสั่งแก้ไขหน้าต่างไม่ได้มีแต่เพียง ปรับความกว้างและความสูง แต่ยังมีคำสั่งอื่นๆ ที่ไม่ได้แก้ค่าเป็นตัวเลขเหมือนปรับความกว้างและสูง แต่ปรับโดยใช้ ค่า yes หรือ no (หรือคุณอาจใช้ เลข 1 แทนคำว่า yes และเลข 0 แทนคำว่า no ก็ให้ผลเช่นเดียวกันครับ) ข้างล่างนี่เป็นคำสั่งแก้ไขหน้าต่างแบบอื่นๆครับ อย่าลืมว่าห้ามมีช่องว่างระหว่างคำสั่งนะครับ
toolbar= บอกว่าจะมีแถบเครื่องมือ(แถบใหญ่ๆด้านบนที่รองจากแถบเมนู)หรือไม่
menubar= บอกว่าจะมีแถบเมนูหรือไม่
scrollbars= บอกว่าจะมีแถบเลื่อนหน้าต่างหรือไม่
resizable= บอกว่าผู้ใช้จะสามารถปรับขนาดหน้าต่างได้หรือไม่
location= บอกว่าจะมีแถบบอกที่อยู่(URL) ของหน้าต่างเปิดใหม่หรือไม่
directories= บอกว่าจะมีแถบ directories หรือไม่
status= บอกว่าจะมี status bar หรือไม่
fullscreen= บอกว่าหน้าต่างใหม่จะขึ้นเต็มจอหรือไม่
menubar= บอกว่าจะมีแถบเมนูหรือไม่
scrollbars= บอกว่าจะมีแถบเลื่อนหน้าต่างหรือไม่
resizable= บอกว่าผู้ใช้จะสามารถปรับขนาดหน้าต่างได้หรือไม่
location= บอกว่าจะมีแถบบอกที่อยู่(URL) ของหน้าต่างเปิดใหม่หรือไม่
directories= บอกว่าจะมีแถบ directories หรือไม่
status= บอกว่าจะมี status bar หรือไม่
fullscreen= บอกว่าหน้าต่างใหม่จะขึ้นเต็มจอหรือไม่
มีสิ่งเดียวที่ปรับไม่ได้ คือ แถบหัวข้อ(title bar) เป็นแถบสีน้ำเงินทึบที่อยู่สุดขอบหน้าต่างด้านบน ซึ่งจะโผล่มาทุกครั้งไปครับ คุณอาจสงสัยว่าคำสั่งต่างๆนี้เป็น ส่วนประกอบ หรือเปล่า... ไม่ครับ มันเป็นสิ่งที่เรียกว่าคุณลักษณะ(features) ซึ่งในกรณีนี้เป็นคุณลักษณะของหน้าต่างใหม่ที่สคริปเปิดขึ้นมา
การเปิดหน้าต่างใหม่ด้วย link HTML (สำหรับคนที่รู้แล้ว ผ่านหัวข้อนี้ไปได้เลยครับ)
<A HREF="http://www.google.co.th" TARGET="main">google</A>
นี่เป็น link เปิดเว็บไซท์กูเกิ้ลในหน้าต่างใหม่เมื่อผู้ใช้คลิ๊กคำว่า google คุณจะสังเกตว่าต่างจาก link ธรรมดาตรงที่มี TARGET="main" เพิ่มขึ้นมาเป็นตัวทำให้เปิด link ในหน้าต่างใหม่ ใน link ธรรมดานั้นเมื่อผู้ใช้คลิ๊ก ก็จะเปิด link ทับหน้าต่างเดิม ไม่ขึ้นในหน้าต่างใหม่ ไม่ว่าคุณจะรู้หรือไม่ ...หน้าต่างใหญ่ปกตินั้นมีชื่อว่า main ซึ่งเป็นชื่อดั้งเดิมที่มีอยู่ก่อนแล้ว
แต่หากคุณต้องการให้ link เปิดในหน้าต่างเล็กที่มีเว็บกูเกิ้ลอยู่ ซึ่งเราตั้งชื่อหน้าต่างนั้นว่า new คุณสามารถเปิด link ในหน้านั้นได้โดยใช้ TARGET="new" คุณสามารถเปิดหลายๆหน้าต่างโดยใช้คำสั่ง window.open(หรือ open เฉยๆ) หลายๆอัน โดยต้องตั้งชื่อแต่ละหน้าต่างให้แตกต่างกัน คุณสามารถทำ link จากหน้าต่างหนึ่ง ไปอีกหน้าต่างหนึ่งได้เสมอ หากคุณพิมพ์ชื่อหน้าต่างลงไปใน link (target) ให้ถูกต้อง
แต่หากคุณต้องการให้ link เปิดในหน้าต่างเล็กที่มีเว็บกูเกิ้ลอยู่ ซึ่งเราตั้งชื่อหน้าต่างนั้นว่า new คุณสามารถเปิด link ในหน้านั้นได้โดยใช้ TARGET="new" คุณสามารถเปิดหลายๆหน้าต่างโดยใช้คำสั่ง window.open(หรือ open เฉยๆ) หลายๆอัน โดยต้องตั้งชื่อแต่ละหน้าต่างให้แตกต่างกัน คุณสามารถทำ link จากหน้าต่างหนึ่ง ไปอีกหน้าต่างหนึ่งได้เสมอ หากคุณพิมพ์ชื่อหน้าต่างลงไปใน link (target) ให้ถูกต้อง
การปิดหน้าต่างด้วย link HTML (สำหรับคนที่รู้แล้ว ผ่านหัวข้อนี้ไปได้เลยครับ)
<A HREF="" onClick="self.close( )">กดที่นี่เพื่อปิดหน้าต่าง</A>
นี่ก็เป็น link ธรรมดาๆ ที่นำไปสู่ความว่างเปล่า ...เห็นเครื่องหมายคำพูดที่ภายในไม่มีอะไรเลยไหมครับ นั่นเป็นการป้องกันไม่ให้มีการโหลดเกิดขึ้น ส่วนคำสั่งที่ใช้ปิดหน้าต่างคือ onClick="self.close( )" self(แปลว่า ตัวเอง) เป็นชื่อหนึ่งของหน้าต่าง หมายถึงหน้าต่างที่มี link นั้นอยู่ แล้วตามมาด้วย จุด และวิธีกระทำ close( ) ซึ่งทำหน้าที่ปิดหน้าต่าง คุณสามารถสร้าง link เพื่อปิดหน้าต่างอื่นได้ โดยเปลี่ยนคำสั่งให้เป็น ชื่อของหน้าต่างนั้น.close( ) เช่น มีหน้าต่างชื่อ r ก็ให้ใช้ว่า r.close( )
การเปิดหน้าต่างใหม่ด้วย link HTML และต้องการแก้ไขหน้าต่างเปิดใหม่
<A HREF="http://www.freewebs.com/maneemana/j11.html"
onClick="window.open('http://www.google.co.th', 'joe',
config='height=600,width=600')">กดที่นี่เพื่อเปิดกูเกิ้ลในหน้าต่างใหม่</A>
onClick="window.open('http://www.google.co.th', 'joe',
config='height=600,width=600')">กดที่นี่เพื่อเปิดกูเกิ้ลในหน้าต่างใหม่</A>
ผลของโค้ด... กดที่นี่เพื่อเปิดกูเกิ้ลในหน้าต่างใหม่
นี่เป็น link HREF ที่เปิดหน้านี้เหมือนเดิม พอคลิ๊กปุ๊บ ก็จะโหลดหน้านี้มาอีกครั้งเหมือนกดปุ่ม Refresh ...ส่วนคำสั่ง onClick ทำให้หน้าต่างใหม่ เปิดขึ้นมาโดยมีความกว้าง 600 พิกเซล สูง 600 พิกเซล
แบบฝึกหัด
ผมไม่ได้แสดงตัวอย่างการแก้ไขหน้าต่างทั้งหมด แสดงเพียงปรับความกว้างและความสูงเท่านั้น แบบฝึกหัดนี้จึงต้องการให้คุณเขียนสคริปที่เปิดหน้าต่างใหม่ พร้อมทั้งมีครบทุกคุณลักษณะ(features) ที่กล่าวมาทั้งหมด โปรดทำให้หน้าต่างใหม่กว้าง 500 พิกเซล และสูง 300 พิกเซล
ในหน้าที่คุณสร้างขึ้นต้องมี 2 link :
ในหน้าที่คุณสร้างขึ้นต้องมี 2 link :
· อันหนึ่งใช้เปิด link ในหน้าต่างใหม่ที่มีครบทุกคุณลักษณะของหน้าต่าง
· อันใช้หนึ่งปิดหน้าต่างใหม่
· หน้าที่เปิดขึ้นมาใหม่(ให้คุณสร้างหน้านี้ขึ้นมาด้วย)นั้นต้องมี link ที่ปิดหน้านั้น
ข้อแนะนำ : ให้สร้างหน้าทั้งสอง ด้วย notepad แล้ว save เก็บไว้ในเครื่องของคุณ โดยหน้าแรกจะมี link ไปยังหน้าที่สอง โดยใช้ที่อยู่ของหน้าที่สอง เช่น หน้าที่สอง save ไว้ในคอมฯที่ C:\My Documents\p2.html ...ให้สร้าง link หน้าแรกไปยัง C:/My Documents/p2.html(สังเกตว่าใน HTML ต้องไม่ใช้เครื่องหมายทับกลับด้านในการแสดงที่อยู่)
เฉลย
โค้ดของหน้าแรก
<a href="หน้าแรก" onClick="open('หน้าสอง','ชื่อหน้าสอง',config='height=300,width=500,resizable=1,toolbar=1,menubar=1,scrollbars=1,location=1,status=1,directories=1')">
กดที่นี่เพื่อเปิดหน้าใหม่</a>
<br><br>
<a href="หน้าแรก" onClick="ชื่อหน้าสอง.close()">กดที่นี่เพื่อเปิดปิดหน้าต่างใหม่</a>
กดที่นี่เพื่อเปิดหน้าใหม่</a>
<br><br>
<a href="หน้าแรก" onClick="ชื่อหน้าสอง.close()">กดที่นี่เพื่อเปิดปิดหน้าต่างใหม่</a>
โค้ดของหน้าสอง
<a href="" onClick="self.close()">กดที่นี่เพื่อปิดหน้าต่างนี้</a>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น