วันเสาร์ที่ 7 กันยายน พ.ศ. 2556

jQuery กับการส่งค่าข้ามเพจ


     วันนี้มีเทคนิคเด็ดๆเกี่ยวกับ jQuery ที่น่าสนใจมานำเสนอครับ บางท่านอาจจะเคยใช้เทคนิคนี้มาแล้ว นั่นคือการส่งค่าจากหน้าเว็บหนึ่งไปยังอีกหน้าเว็บหนึ่่ง
      ซึ่งการทำงานของมันคือ หน้าเว็บปลายทางจะสามารถส่งค่าไปยังหน้าเว็บต้นทางที่เรียกใช้มันเท่านั้น โดยเราจะประยุกต์ใช้คำสั่ง window.opener กับหน้าเว็บปลายทางครับ หน้าเว็บปลายทางสามารถเข้าถึง Method หรือ Function และ Element ต่างๆที่อยู่หน้าเว็บต้นทางที่เรียกใช้มันได้ทั้งหมด

มาดูโค๊ดตัวอย่างกัน

หน้าเว็บต้นทาง ตั้งชื่อว่า mainfile.html พิมพ์Codeตามนี้ครับ

ส่วนของ Javascript
<script type="text/javascript">
function showHello(){
 alert('Hello World');
}
</script>
ส่วนของ body
<div id="hello"></div>
<!--<a href="popup.html" target="_blank">ไฟล์หน้า POPUP</a> -->
<input type="button" name="callPopUp" id="callPopUp" value="เรียกหน้า POPUP" onclick="window.open('popup.html', '_blank', 'height=200, width=400');" />
ไฟล์ mainfile.html (หน้าเว็บต้นทาง) หน้านี้ไม่มีอะไรมาก มีคำสั่ง window.open เพื่อแสดงไฟล์ popup.html แบบป๊อปอัพ  มีฟังก์ชั่น showHello() และ DIV Tag มีค่า id=hello ถูกสร้างเอาไว้ เพื่อให้ไฟล์ popup.html เรียกใช้

ไฟล์ popup.html (หน้าเว็บปลายทาง) พิมพ์Codeดังนี้

ส่วนของ Javascript (jQuery)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#callElement').click(function(){
  $(window.opener.document).find('#hello').html('Hello World');//วิธีเข้าถึง Element DIV id=hello ในไฟล์ mainfile.html (หน้าเว็บต้นทางที่เรียกหน้านี้ขึ้นมา)
  window.close();
 });
 $('#callFunc').click(function(){
  window.opener.showHello();//วิธีเรียกใช้ ฟังชั่น showHello() ในไฟล์ mainfile.html (หน้าเว็บต้นทางที่เรียกหน้านี้ขึ้นมา)
  window.close();
 });
});
</script>

ส่วนของ body
<input type="button" name="callElement" id="callElement" value="แสดงข้อความ Hello ใน mainfile" />
<input type="button" name="callFunc" id="callFunc" value="เรียกใช้ Function showHellow ใน mainfile" />

หน้านี้จะทำหน้าที่ส่งค่าไปยัง Element ต่างๆที่อยู่ในไฟล์ mainfile.html ในที่นี้คือ แสดงคำว่า Hello World ใน DIV Tag id=hellow และรวมถึงสามารถเรียกใช้ฟังก์ชั่นต่างๆที่อยู่ในไฟล์ mainfile.html ในที่นี้คือฟังก์ชั่น showHello()

วันนี้ขอสอนเทคนิคเด็ดๆสั้นๆแค่นี้ก่อนครับ ^^ สงสัยตรงไหนสามารถสอบได้จากกล่องCommentด้านล่างได้เลยครับ

ปล.บทความนี้เป็นบทความที่ 100 ของผมพอดีครับ หลังจากเขียนมานานถึง 3 ปี (ตั้งแต่ปี 2010) ^^

2 ความคิดเห็น :

  1. ไม่ระบุชื่อ16 พฤษภาคม 2557 15:35

    อยากให้แสดงผลลัพธ์ที่ได้ด้วยอ่ะค่ะ แคปหน้าจออ่ะจะดีมาก :)

    ตอบลบ
    คำตอบ
    1. ลองนำโค๊ดไปรันดูผลลัพธุ์เอาเองครับ

      ลบ