Bagaimana untuk Mengatasi 'SecurityError: Akses Silang Asal Disekat' Apabila Menggunakan Iframes?

Ralat Keselamatan: Akses Silang Asal Disekat

Apabila cuba menyepadukan iframe ke dalam halaman HTML anda dan mengakses elemennya menggunakan JavaScript, anda mungkin menghadapi ralat berikut:

SecurityError: Blocked a frame with origin "http://www.example.com" from accessing a cross-origin frame.

Ralat ini berpunca daripada pematuhan penyemak imbas kepada dasar asal yang sama, langkah keselamatan yang menghalang skrip daripada mengakses bingkai dengan asal yang berbeza. Asal merangkumi protokol, nama hos dan port.

Penyelesaian

Walaupun akses skrip silang asal terus dilarang, anda boleh menggunakan window.postMessage dan acara mesej yang sepadan untuk mewujudkan komunikasi antara bingkai:

Utama Halaman:

const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'https://your-second-site.example');

Iframe:

window.addEventListener('message', event => {
    // Verify the origin to ensure it's your site
    if (event.origin === 'https://your-first-site.example') {
        // Retrieve data from event.data
        console.log(event.data);
    }
});

Pendekatan ini membenarkan komunikasi dua arah antara bingkai. Hantaran mesej silang asal juga boleh digunakan pada tetingkap timbul dan tetingkap baharu lain yang dijana daripada halaman utama.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi 'SecurityError: Akses Silang Asal Disekat' Apabila Menggunakan Iframes?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!