PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

31 July 2010 By
javascript iframe parent

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



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






Tags:: javascript parent iframe






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


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