Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Mendayakan Komunikasi Merentas Domain Antara Iframe dan Tapak Induknya?

Bagaimanakah Saya Boleh Mendayakan Komunikasi Merentas Domain Antara Iframe dan Tapak Induknya?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-28 19:11:11386semak imbas

How Can I Enable Cross-Domain Communication Between an Iframe and its Parent Site?

Komunikasi Antara Tapak: Menghubungkan Iframe dan Tapak Induk Merentasi Domain

Komunikasi merentas domain boleh memberikan cabaran apabila bekerja dengan iframe. Jika domain iframe berbeza daripada tapak induk, akses terus atau panggilan kaedah di antara mereka menjadi mustahil.

Untuk mengatasi halangan ini, pemesejan silang dokumen menyediakan penyelesaian:

Tapak Induk kepada Iframe:

Dalam tetingkap induk, hantar mesej kepada kandungan iframe tetingkap:

myIframe.contentWindow.postMessage('hello', '*');

Dalam iframe, dengar acara mesej:

window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

Iframe ke Tapak Induk:

Dalam iframe , hantar mesej ke tetingkap induk peringkat atas:

window.top.postMessage('hello', '*')

Dalam tetingkap induk, dengar acara mesej:

window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

Ingat, '*' dalam postMessage() membenarkan mesej disiarkan ke semua tetingkap mendengar. Dengan menggunakan pemesejan silang dokumen, anda boleh mewujudkan komunikasi antara iframe dan tapak induknya, walaupun merentasi domain yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendayakan Komunikasi Merentas Domain Antara Iframe dan Tapak Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn