javascript - 跨源 PostMessage 方法失败

Question

(我四处寻找并找到了许多修复程序和文档，但我发布这些是因为它们都对我不起作用。)

我有 2 个 MVC4 站点正在开发中。 SSO(即 HTTPS)和视频(即 HTTP)
(现在都是本地主机)

Videos 使用指向 SSO 上的页面的 IFRAME 加载页面。它正确加载页面。

SSO 页面有这个 javascript:

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

视频页面有这段代码:

<iframe frameborder="0" width="100px" height="100px" id="LbpSsoFrame" src="https://localhost:44301/Sso/InFrame"></iframe>

页面加载后，我使用 chrome 的控制台(Chrome V32.0.1700.41 m Aura)并调用以下代码行:

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

我收到这个错误:

code: 18
message: "Blocked a frame with origin "http://localhost:46086" from accessing a cross-origin frame."
name: "SecurityError"
stack: "Error: Blocked a frame with origin "http://localhost:46086" from accessing a cross-origin frame.↵    at <anonymous>:2:12↵    at Object.InjectedScript._evaluateOn (<anonymous>:603:39)↵    at Object.InjectedScript._evaluateAndWrap (<anonymous>:562:52)↵    at Object.InjectedScript.evaluate (<anonymous>:481:21)"

我站在一堵砖墙前，希望其他人可以知道我做错了什么或还需要做些什么。谢谢。

Answer 1

Yahoo，我发现了问题:我不应该将 LbpSsoFrame 作为对象来调用。我不确定为什么。

这是有效的代码:

document.getElementById('LbpSsoFrame').contentWindow.postMessage('hello', '*');

这是我的:

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

修复该线路后，我就能收到消息了。

我还以为是

document.getElementById('LbpSsoFrame')

和

LbpSsoFrame

是调用同一事物的不同方式。任何人都可以向我解释有什么区别吗？两者都可以调用 post 消息，但我在直接使用该对象时会收到 HTTPS/HTTP 警告或其他警告。

它现在可以工作了，但我还是有点迷惑为什么。