Komunikasi lintas domain dari iFrame induk ke anak menggunakan Javascript

Saya perlu meneruskan data dari halaman web ke iFrame yang dihosting di halaman web itu. Saya menggunakan window.postMessage. namun iFrame tidak menerima acara tersebut.

Ini cuplikan kode saya. Halaman induk:

<!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>

Cuplikan kode untuk Receiver.htm adalah:

<!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>

Saya menjalankan halaman induk di Tomcat (localhost:8080). IFrame berjalan di server HTTP yang saya buat menggunakan httplistener. Saat saya menjalankan halaman induk dan menekan tombol yang menghasilkan acara, saya tidak mendapatkan peringatan "Saya di iFrame". Sepertinya iFrame tidak menerima acara tersebut sama sekali. Apa yang kulewatkan di sini? Bantuan apa pun sangat dihargai. Terima kasih!


person Betty Thomas    schedule 10.05.2013    source sumber


Jawaban (3)


Kode Anda memiliki beberapa bagian yang aneh. Anda menggunakan attachEvent di mana lebih baik menggunakan addEventListener dan Anda mungkin harus memposting ke contentWindow, bukan mendokumentasikan.

person Halcyon    schedule 10.05.2013
comment
Saya menggunakan IE8.addEventListener tidak akan bekerja dengan IE8. AttachEvent adalah metode yang benar untuk IE8. Saya memposting ke jendela konten. Breakpoint saya mencapai garis itu. - person Betty Thomas; 11.05.2013

Masalah dengan kode saya adalah ini: window.attachEvent("onMessage", myhandler)

onmessage harus menggunakan huruf kecil semua. Setelah saya mengubah baris ini ke bawah, itu berhasil.

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

Saya memposting jawabannya di sini: javascript pengubahan ukuran iframe lintas domain

Dan tautan itu juga memiliki tautan ke contoh kode yang berfungsi di github.

person ppetree    schedule 08.10.2013