Mar
23
2009

วิธีการเข้าถึง iframe ด้วย jQuery

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

เมื่อมีการทำงานผ่าน Iframe หลายๆคนก็คงจะเกิดปัญหาเดียวกันว่า จะทำอย่างไรถึงจะสามารถ ควบคุม หรือ ดึงค่า เช็คค่าต่างๆ จาก iframe ที่เราเรียกมาได้ แต่ขอเน้นอย่างหนึ่งนะครับ การเข้าถึงหรือ access iframe นั้น ถ้าหากว่า iframe นั้นถูกเรียกมาจาก ต่าง Domain name กันจะเกิดปัญหาด้านความปลอดภัย เราจะไม่สามารถ ดึงข้อมูลหรือกระทำอะไรกับ iframe ที่เราต้องการได้เลยครับ ดังนั้น ถ้าจะใช้วิธีนี้ เราจะต้องใช้ iframe ที่อยู่ภายใต้ Domain name เดียวกัน

ตัวอย่าง Code HTML :

<iframe id="myIframe" src="myContent.html" width="400" ></iframe>

ตัวอย่าง Code HTML ใน File myContent.html :

<html>
   <body>
      <div id="myName"> My Name is jQuery.in.th</div>
   </body>
</html>

จาก code ตัวอย่างเป็นการเรียก file ชื่อ myContent.html มาแสดงผลใน iframe และใน file ที่ชื่อ myContent.html นั้นก็จะการเขียน tag DIV ขึ้นมาหนึ่งตัว โดยที่ใน tag นั้นบรรจุ ข้อความว่า “My Name is jQuery.in.th” เอาใว้

ต่อมาเราจะมาเขียน code jQuery เพื่อที่จะดึงเอาข้อความ ใน DIV ตัวนั้นขึ้นมาโชว์สามารถเขียนได้ดังนี้

ตัวอย่าง Code jQuery :

     $(document).ready( function(){
              var getResult = $("#myIframe").contents().find('#myName').html();
              alert(getResult);
     } );

</script>

จากตัวอย่างนี้ ผมได้ทำการดึงเอาข้อมูล ของข้อความใน iframe โดยใช้ jQuery ในการเข้าถึงข้อมูลใน iframe ผ่าน function contents() และทำการค้นหา Element ที่มี id ชื่อ myName และทำการดึงเอาข้อความ html นั้นมาเก็บใว้ที่ตัวแปร getResult และสั่งให้ alert ค่าออกมาโชว์

ลองนำไปทดสอบกันดูนะครับ เพราะสำหรับการทำงานจริงๆแล้ว เราจะต้องใช้ความรู้หลายๆด้านมาช่วยในงานที่เราทำ อย่างงานที่ผมทำนี้เวลาเจ้านายให้โจทย์มาเราจะต้องมาคิดว่า เครื่องมือ หรือ ภาษาตัวใหน จะช่วยทำให้งานเรานั้นรวดเร็วเสร็จตามกำหนด และ jQuery ก็เป็นอีกหนึ่งตัวเลือกที่ไม่ทำให้ผิดวังเช่นเคยครับ.

By [root@localhost]#