PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

javascript เรียกฟังก์ชัน ใน parent จาก iframe

31 July 2010 By


ทบทวนความรู้ การเรียกใช้งาน ฟังก์ชัน ใน 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
 


Tags:: javascript iframe parent





URL สำหรับอ้างอิง