javascript-postMessage到沙盒iframe,为什么收件人窗口源为空?
测试中有2个postMessage调用:1个使用targetOrigin的星号,一个使用父文档和子文档的相同https url 按钮1:javascript-postMessage到沙盒iframe,为什么收件人窗口源为空?,javascript,html,iframe,sandbox,postmessage,Javascript,Html,Iframe,Sandbox,Postmessage,测试中有2个postMessage调用:1个使用targetOrigin的星号,一个使用父文档和子文档的相同https url 按钮1: $('.iframed')[0].contentWindow.postMessage( messageData , '*' ); parent.postMessage( messageData , 'https://myurl.net' ); 按钮2: $('.iframed')[0].contentWindow.postMessage( message
$('.iframed')[0].contentWindow.postMessage( messageData , '*' );
parent.postMessage( messageData , 'https://myurl.net' );
按钮2:
$('.iframed')[0].contentWindow.postMessage( messageData , 'https://myurl.net' );
parent.postMessage( messageData , '*' );
父html文档中的iframe元素,指向同一目录中同一域上的子html文件:
<iframe name="childFrame" class="iframed" src="child.html" sandbox="allow-scripts"></iframe>
iframed按钮2:
parent.postMessage( messageData , '*' );
==========================================
那么,如果我没有添加“允许相同来源”,为什么从父对象到iframe的postMessage会导致上述错误(为什么这个问题不影响到到父对象的iframe postMessage)?我尝试将iframe src设置为child.html文档的绝对https url,但结果相同。我还在不同的非ssl证书服务器位置上测试了相同的代码,得到了相同的结果(所以不要认为这是https造成的…)。我必须将星号作为targetOrigin,和/或在沙箱参数中使用allow same origin吗
关于这个问题的其他对话似乎已经走到了尽头,因此希望从新的角度来看待解决方案……这个问题是由
本身造成的,它的沙箱属性是:
根据Mozilla开发者网络文档,以下是关于同源策略的问题:
允许同一来源
:如果未使用此令牌,则资源将被视为来自一个特殊来源,该来源始终不符合同一来源策略
您没有指定允许相同来源
,这意味着帧被视为来自特殊来源,对该帧的postMessage
调用将失败
要解决此问题,只需将allow same origin
添加到sandbox
属性中,如下所示:
A.
B
$('.btn1')。单击(函数(事件){
//这管用!
$('.iframed')[0].contentWindow.postMessage(“某物”、'*');
});
$('.btn2')。单击(函数(事件){
//这也行
$('.iframed')[0].contentWindow.postMessage(“您想要的任何内容,”https://myurl.net' );
});
window.onmessage=函数(事件){
console.log(事件数据);
}
就这样 你修好了吗?我也有同样的问题,嗨,雪人。你修好了吗?)已经有一段时间了。