javascript เรียกฟังก์ชัน ใน parent จาก iframe
31 July 2010ทบทวนความรู้ การเรียกใช้งาน ฟังก์ชัน ใน parent จาก iframe ตัวอย่างต่อไปนี้ เป็น
บันทึกช่วยจำ กรณีต้องการเรียกใช้งาน javascript ฟังก์ชัน ใน parent จาก iframe เงื่อนไข คือในไฟล์หลัก มี javascript ฟังก์ชัน อยู่ และมีการใช้งาน iframe โดยต้องการเรียกใช้งาน ฟังก์ชัน ในไฟล์หลัก จากไฟล์ iframe สามารถเป็นแนวทางได้ดังนี้
parent.callMe(); // parent.ชื่อฟังก์ชันที่เรียกใช้งาน // parent.callMe();
ตัวอย่างการใช้งานจากไฟล์ใน iframe
<button type="button" onclick="parent.callMe();">คลิกเพื่อเรียกฟังก์ชัน callMe() จากไฟล์ iframe</button>
หรือ
<script type="text/javascript"> parent.callMe(); </script>
ตัวอย่างโค้ดไฟล์หลัก main_file_with_iframe.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>คือในไฟล์หลัก มี javascript ฟังก์ชัน อยู่ และมีการใช้งาน ifram</title>
<style type="text/css">
body {
background-color: #333;
}
</style>
</head>
<body>
<button type="button" onclick="callMe();">คลิกเพื่อเรียกฟังก์ชัน callMe() จากไฟล์หลัก</button>
<br />
<br />
<iframe name="myiframe" src="my_iframe.php" width="450" height="350" frameborder="1">
</iframe>
<script type="text/javascript">
function callMe(){
alert("Test");
}
</script>
</body>
</html>
ตัวอย่างโค้ดไฟล์ iframe my_iframe.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ฟังก์ชัน ในไฟล์หลัก จากไฟล์ iframe</title> </head> <body> <button type="button" onclick="parent.callMe();">คลิกเพื่อเรียกฟังก์ชัน callMe() จากไฟล์ iframe</button> </body> </html>
ตัวอย่าง
http://www.ninenik.com/demo/main_file_with_iframe.php
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
18 Dec 09 สร้างไฟล์ word จาก html ด้วย php class ได้อย่างง่าย อ่าน 1959 09 Apr 10 สร้าง countdown นับเวลา ถอยหลัง ด้วย javascript อ่าน 5084 02 Oct 10 สร้าง animation แนะนำเส้นทาง ใน google map อย่างง่าย อ่าน 2448 12 Nov 09 รู้จักกับ Ajax Events ใน jQuery อ่าน 4246 20 Sep 10 ทบทวนการ สร้าง และใช้งาน ตัวแปร array ใน javascript อ่าน 1204 08 Oct 08 คำสั่ง SQL SELECT อ่าน 4883 16 Oct 09 สร้างฟังก์ชัน php แปลงตัวเลข เป็นข้อความตัวอักษร ภาษาไทย อ่าน 2152 24 Feb 11 ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่าย อ่าน 1705 12 Sep 10 จัดรูปแบบ ScaleControlOptions ใน Google Map อ่าน 1162 26 Jan 12 แสดง icons กำหนดรูปเอง ให้จุดเริ่มเต้น และสิ้นสุดของเส้นทาง ใน google map อย่างง่าย อ่าน 444 18 Sep 10 ดึงข้อมูล จากฐานข้อมูล สร้าง รายการเครือข่าย แบบ tree ด้วย php อ่าน 2662 15 Sep 10 สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์ อ่าน 3722 10 May 10 แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่าย อ่าน 3253 22 Oct 08 คำสั่ง SQL GROUP BY อ่าน 5738 29 Dec 10 เพิ่มเติม การใช้งาน popup แบบ showModalDialog อย่างสมบูรณ์ อ่าน 4124 07 Aug 10 ใช้ css แบ่งเนื้อหา เป็นคอลัมน์ พร้อมแบ่งหน้า ด้วย php อ่าน 2896 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5414 25 Sep 08 Margins and Padding การจัดการพื้นที่ระหว่างสิ่งต่างๆ อ่าน 3433 13 Oct 08 คำสั่ง SQL AND OR อ่าน 3103 25 Sep 08 ป้องกันคนคลิกขวา และ ป้องกันคน select ข้อความ อ่าน 1897