Article
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

เทคนิคการส่งตัวแปรข้ามหน้าต่างใน JavaScript

โดย สรวุฒิ กอสุวรรณศิริ

          ที่ผมเขียนบทความเรื่องนี้ก็เพราะมีผู้ถามกันเข้ามามากมาย ว่าถ้าต้องการส่งตัวแปรต่างๆข้าม window จะทำได้อย่างไร บางคนพยายามหลายวิธีแต่ก็ไม่ได้ผลจนถอดใจ และเข้าใจว่าทำไม่ได้ไปเลยก็มี ซึ่งความจริงแล้วมันก็ทำตรงๆไม่ได้หรอกครับ แต่ก็มีวิธีทำได้เหมือนกัน (อ้าว?) ลองดูวิธีของผมดูนะครับ

          แนวคิดก็คือ เราจะต้องเอาค่าของตัวแปร ที่ต้องการจะส่งข้ามหน้าต่าง ไปเก็บไว้ใน form เพราะฟอร์มเป็นอ็อบเจกต์ จึงสามารถใช้อ้างอิงข้ามหน้าต่างกันได้ แต่ต้องมีความสัมพันธ์ระหว่างหน้าต่างทั้ง 2 ไม่ทางใดก็ทางหนึ่ง เช่น หน้าต่างแรกเป็นตัวเปิดหน้าต่างที่ 2 หรือ หน้าต่างทั้ง 2 ต่างก็เปิดมาจากหน้าเดียวกัน หรือมีความสัมพันธ์กันในรูปแบบ frame ก็ได้สรุปว่าจะต้องหาความสัมพันธ์ของหน้าต่างทั้ง 2 ให้ได้ก็แล้วกัน

          เริ่มกันเลยดีกว่า สมมุติว่าผมมีไฟล์ test.html มีโค้ดดังนี้ครับ

<HTML> <HEAD> <title>window1</title> </HEAD> <BODY BGCOLOR="#FFFFFF" onload=" // ตรงนี้เปิดหน้าต่างที่ 2 และ 3 ครับ win2=window.open('test2.html'); win3=window.open('test3.html');"> <center> <h1>Window 1</h1> <form name=f1> <input name=i1 type=text> <input type=button value="send to window 2" onclick=" // ตรงนี้เป็นปุ่มสั่งให้ส่งข้อมูลไปยัง window2 ครับ if (win2) { win2.document.f2.i2.value=document.f1.i1.value; } "> <input type=button value="send to window 3" onclick=" // ตรงนี้เป็นปุ่มสั่งให้ส่งข้อมูลไปยัง window3 ครับ if (win3) { win3.document.f3.i3.value=document.f1.i1.value; } "> </form> </center> </BODY> </HTML>           ยังเอาไปรันไม่ได้นะครับ เพราะต้องรันคู่กับ test2.html และ test3.html แต่ก่อนที่ผมจะให้รายละเอียดของ 2 ไฟล์นี้ ผมขออธิบายไฟล์แรกก่อนครับ สิ่งที่ผมใส่ไปในไฟล์แรกก็มีช่องรับข้อความ 1 ช่อง และปุ่มอีก 2 ปุ่ม สำหรับกดเพื่อส่งข้อมูลในช่องรับข้อความไปยัง Window ที่ 2 และ 3 สิ่งที่ผมอยากให้สังเกตก็คือ ชื่อของ form ผมใช้ f1 ใน window นี้ และชื่อของ input จะเป็น i1 ดังนั้น การอ้างถึงช่องรับอินพุตใน window นี้ ก็จะใช้แบบนี้ครับ

document.f1.i1.value

และผมจะใช้ f2,i2 และ f3,i3 ใน window ที่ 2 และ 3 ซึ่งผมตั้งชื่อว่า win2 และ win3 ครับ (ให้สังเกตตรงบรรทัดที่ผมใช้เปิดหน้าต่าง) ดังนั้น การอ้างถึง form ใน win2 และ win 3 จากใน win1 จึงเป็นแบบนี้ครับ

win2.document.f2.i2.value
win3.document.f3.i3.value

ถาม : การอ้างถึง win2 และ win3 จาก win1 ทำได้เพราะ win1 เป็นคนตั้งชื่อ win2 และ win3 แต่ถ้าต้องการอ้างถึง win1 จากใน win2 จะทำได้อย่างไร ?

แน่นอนว่า win2 และ win3 จะไม่รู้จักอ็อบเจกต์ที่ชื่อ win1 แน่นอน แต่เราสามารถอ้างอิงถึง win1 ได้จาก window synonym ซึ่งเป็นชื่อที่เราใช้เชื่อมความสัมพันธ์ระหว่าง window นั่นเอง ในกรณีนี้เราจะใช้ synonym ว่า opener ในการแทน win1 จากใน win2 และ win3

opener เป็น synonym ที่ใช้อ้าอิงถึง window ที่เป็นผู้เปิด window ปัจจุบันขึ้นมา สำหรับรายละเอียดของ synonym ทั้งหมดสามารถดูได้ใน บทที่ 8 Windows - การใช้ window Synonyms ครับ ต่อไปเป็นรายละเอียดของ ไฟล์ test2.html และ test3.html ลองสังเกตโค้ดดูนะครับ

ไฟล์ test2.html

<HTML> <HEAD> <TITLE> window2 </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <center> <h1>Window 2</h1> <form name=f2> <input name=i2 type=text> <input type=button value="send to window 1" onclick=" if (opener) { // ปุ่มนี้ใช้ส่งข้อมูลไป window 1 ครับ opener.document.f1.i1.value=document.f2.i2.value; } "> <input type=button value="send to window 3" onclick=" if (opener.win3) { // ปุ่มนี้ใช้ส่งข้อมูลไป window 3 ครับ opener.win3.document.f3.i3.value=document.f2.i2.value; } "> </form> </center> </BODY> </HTML>

ไฟล์ test3.html

<HTML> <HEAD> <TITLE> Window 3 </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <center> <h1>Window 3</h1> <form name=f3> <input name=i3 type=text> <input type=button value="send to window 1" onclick=" if (opener) { // ปุ่มนี้ใช้ส่งข้อมูลไป window 1 ครับ opener.document.f1.i1.value=document.f3.i3.value; } "> <input type=button value="send to window 2" onclick=" if (opener.win2) { // ปุ่มนี้ใช้ส่งข้อมูลไป window 2 ครับ opener.win2.document.f2.i2.value=document.f3.i3.value; } "> </form> </center> </BODY> </HTML>

วิธีการทดสอบ - ให้พิมพ์ข้อความลงไปแล้วส่งไปที่ window อื่นครับ ข้อความจะไปปรากฎใน text box ของ window อื่นทันทีที่กดปุ่ม

Back top top





© copyright 2001 Sorrawut Korsuwansiri