使用 Iframe 时如何克服'SecurityError: Blocked Cross-Origin Access”？

安全错误：阻止跨源访问

尝试将 iframe 集成到 HTML 页面并使用 JavaScript 访问其元素时，您可能会遇到以下错误：

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

此错误源于浏览器遵守同源策略，这是一种防止脚本访问框架的安全措施有着不同的起源。源包含协议、主机名和端口。

解决方法

虽然禁止直接跨源脚本访问，但您可以利用 window.postMessage 及其相应的消息事件在源之间建立通信框架：

主要Page:

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);
    }
});

这种方法允许框架之间的双向通信。跨源消息传递还可以应用于弹出窗口和从主页生成的其他新窗口。

以上是使用 Iframe 时如何克服'SecurityError: Blocked Cross-Origin Access”？的详细内容。更多信息请关注PHP中文网其他相关文章！