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

31 July 2010 เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee

parent javascript iframe

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ parent javascript iframe

เนื้อหาต่อไปนี้ จะเป็นแนวทางการเรียกใช้งาน 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>

ตัวอย่าง

http://www.ninenik.com/demo/main_file_with_iframe.php

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ