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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
parent iframe javascript

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



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

ตัวอย่าง



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











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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ