วันนี้มีเทคนิคเด็ดๆเกี่ยวกับ 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) ^^
อยากให้แสดงผลลัพธ์ที่ได้ด้วยอ่ะค่ะ แคปหน้าจออ่ะจะดีมาก :)
ตอบลบลองนำโค๊ดไปรันดูผลลัพธุ์เอาเองครับ
ลบ