การสื่อสารข้ามโดเมนจาก iFrame หลักถึงลูกโดยใช้ Javascript

ฉันต้องส่งข้อมูลจากหน้าเว็บไปยัง iFrame ที่โฮสต์อยู่ในหน้าเว็บนั้น ฉันใช้ window.postMessage อย่างไรก็ตาม iFrame จะไม่ได้รับเหตุการณ์

นี่คือข้อมูลโค้ดของฉัน หน้าหลัก:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Test event listener</title>
</head>
<body>
<script type="text/javascript">
function SendMsgToIFrame() {
    alert("In Parent window ");
    var myiframe = document.getElementById('myIframe');
    if (myiframe.contentDocument) {
        myiframe.contentDocument.postMessage('Post Message from Parent', '*');
    }
    else if (myiframe.contentWindow) {
        myiframe.contentWindow.postMessage('Post Message from Parent', '*');
    }
</script>
<button type="button" onclick="SendMsgToIFrame()">Push to iframe</button>
<div id="iframeDiv">
<iframe id="myIframe" src="http://localhost:50000/Receiver.htm" width="500" height="200" frameborder=10> 
</iframe>
</div>
</body>
</html>

ข้อมูลโค้ดสำหรับ Receiver.htm คือ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Got Text</title>
</head>
<body>
<script type="text/javascript">
    window.attachEvent("onMessage", myhandler);

    function myhandler(mobj) {
        alert("I am in iFrame");
        var message = mobj.data;

        alert("data: " + message);
    }
</script>
<input type="text" name="text1" id="text1" value="text here" /> 
</body>
</html>

ฉันกำลังใช้งานหน้าหลักบน Tomcat (localhost:8080) iFrame ทำงานบนเซิร์ฟเวอร์ HTTP ของฉันที่ฉันสร้างโดยใช้ httplistener เมื่อฉันเรียกใช้เพจหลักและกดปุ่มที่สร้างกิจกรรม ฉันไม่ได้รับการแจ้งเตือน "ฉันอยู่ใน iFrame" ดูเหมือนว่า iFrame จะไม่ได้รับกิจกรรมเลย ฉันพลาดอะไรไปที่นี่? ความช่วยเหลือใด ๆ ที่ชื่นชมอย่างมาก ขอบคุณ!


person Betty Thomas    schedule 10.05.2013    source แหล่งที่มา


คำตอบ (3)


รหัสของคุณมีบางส่วนที่แปลก คุณกำลังใช้ attachEvent โดยที่ควรใช้ addEventListener ดีกว่า และคุณควรโพสต์ไปที่ contentWindow ไม่ใช่ในเอกสาร

person Halcyon    schedule 10.05.2013
comment
ฉันใช้ IE8.addEventListener จะไม่ทำงานกับ IE8 AttachEvent เป็นวิธีที่ถูกต้องสำหรับ IE8 ฉันกำลังโพสต์ไปที่หน้าต่างเนื้อหา เบรกพอยต์ของฉันไปถึงเส้นนั้น - person Betty Thomas; 11.05.2013

ปัญหาเกี่ยวกับรหัสของฉันคือ: window.attachEvent("onMessage", myhandler)

onmessage ควรเป็นตัวพิมพ์เล็กทั้งหมด เมื่อฉันเปลี่ยนบรรทัดนี้เป็นด้านล่าง มันก็ใช้งานได้

window.attachEvent("onmessage", myhandler)
person Betty Thomas    schedule 11.05.2013

ฉันโพสต์คำตอบไว้ที่นี่: การปรับขนาด iframe ข้ามโดเมน javascript

และลิงก์นั้นยังมีลิงก์ไปยังตัวอย่างโค้ดการทำงานบน GitHub ด้วย

person ppetree    schedule 08.10.2013