เนื้อหาต่อไปนี้ จะเป็นแนวทางการเรียกใช้งาน javascript ฟังก์ชั่น ที่อยู่ใน iframe จาก parent หรือเพจหลัก
และการเรียกใช้ javascript ฟังก์ชั่น ที่อยู่ในเพจหลัก หรือ parent จาก iframe
รูปแบบการใช้งาน javascript ฟังก์ชั่น ที่อยู่ในเพจหลัก หรือ parent จาก iframe
parent.callMe(); // parent.ชื่อฟังก์ชันที่เรียกใช้งาน // parent.callMe();
รูปแบบการใช้งาน javascript ฟังก์ชั่น ที่อยู่ใน iframe จาก parent หรือเพจหลัก
document.getElementById('myiframe').contentWindow.iframe_func();
// หรือ
window.frames[0].frameElement.contentWindow.iframe_func();
// document.getElementById('myiframe').contentWindow.ชื่อฟังก์ชั่น;
// window.frames[0].frameElement.contentWindow.ชื่อฟังก์ชั่น;
ตัวอย่างโค้ดไฟล์หลัก main_file_with_iframe.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>คือในไฟล์หลัก มี javascript ฟังก์ชัน อยู่ และมีการใช้งาน ifram</title>
<style type="text/css">
body {
background-color: #333;
}
</style>
</head>
<body>
<button type="button" onclick="callMe();">คลิกเพื่อเรียกฟังก์ชัน callMe() จากไฟล์หลัก</button>
<br />
<br />
<button type="button" onclick="document.getElementById('myiframe').contentWindow.iframe_func();">
คลิกเพื่อเรียกฟังก์ชัน iframe_func() จากไฟล์ iframe</button>
<br />
<iframe id="myiframe" name="myiframe" src="my_iframe.php" width="450" height="350" frameborder="1">
</iframe>
<script type="text/javascript">
// ฟังก์ชั่น main
function callMe(){
alert("Main Func Test");
}
</script>
</body>
</html>
ตัวอย่างโค้ดไฟล์ iframe my_iframe.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ฟังก์ชัน ในไฟล์หลัก จากไฟล์ iframe</title>
</head>
<body>
<button type="button" onclick="parent.callMe();">คลิกเพื่อเรียกฟังก์ชัน callMe() จากไฟล์ iframe</button><br />
<br />
<button type="button" onclick="iframe_func();">คลิกเพื่อเรียกฟังก์ชัน iframe_func() จากไฟล์ iframe</button>
<script type="text/javascript">
// ฟังก์ชั่นใน iframe
function iframe_func(){
alert("iframe func");
}
</script>
</body>
</html>
