bum*_*ann 26 javascript internet-explorer postmessage cross-browser cross-domain
当消息出现时,似乎window11上的window.postMessage仍然被破坏
IE 8/9/10也存在类似的问题,但IE 11中的"部分支持"在IE 11中标记为"支持"
有一个代码的例子适用于chrome/ff但不适用于IE:
$(document).ready(function() {
$('#log').append('listening...');
window.addEventListener("message", function(e){
$('#log').append("Received message: " + JSON.stringify(e.data));
}, false);
$('button').click(function() {
window.open('http://jsbin.com/eQeSeros/1', 'popup','menubar=no, status=no, scrollbars=no, menubar=no, width=200, height=100');
});
});
该子弹出(jsbin) :(如果没有被打开的jsfiddle将无法正常工作)
$(document).ready(function() {
$('body').append('sending...');
window.opener.postMessage("Hello?", "http://fiddle.jshell.net");
$('body').append('sent...');
});
我从帖子中读到了IE10中的跨源postMessage？我们可以使用a MessageChannel代替postMessage,但是阅读doc,我在实际情况下没有找到如何使用它,因为你必须将端口传递给子窗口.
在我需要发送消息之前有一个重定向链,所以即使我可以发送一个端口,我将丢失最初/重定向之前发送的任何js对象.
有没有替换的想法？
更新14/01:我正在考虑在窗口/标签标题中传递我的数据并定期检查父标题中的这个标题......但这将是一个非常脏的技巧.
更新16/01:真正糟糕的部分是,即使消息是从同一个域发送,但在被另一个域重定向后,它确实会中断.
这是一个例子:http: //jsfiddle.net/L4YzG/13/打开弹出窗口http://jsbin.com/eQeSeros/4/edit重定向到http://jsfiddle.net/mxS8Q/2/(那个发布消息)
如果您通过最终URL重定向直接更改url popup到http://jsfiddle.net/mxS8Q/2/show这适用于IE,因为在开放和发布之间没有其他域
我还在处理我的窗口标题脏伎俩.当它在另一个域上时,我们无法接收窗口的标题,但如果它返回到jsfiddle,则标题可用(postMessage之前没有问题).这是一个例子:http://jsfiddle.net/L4YzG/14/ ...这可能是一个替代解决方案,但我刚看到一些关于在cookie中传递数据的事情,它只需要进行测试.
更新04/02:如果最终域相同但不在跨域中,则在标题中传递信息是不够的.我想注入一个相同域的iframe来传递这些信息,但我也不能共享子窗口对象(postMessage需要一个可序列化的对象).
最后我尝试在注入的iframe和子窗口之间共享一个cookie(在js中创建和接收),这在chrome和ff上工作得很好,但仍然无法用IE正确接收它.添加P3P头后它工作正常,这似乎是真正的解决方案.Safari似乎对这种技术有一些问题所以我只是将这种技术作为后备.
Nei*_*kar 15
更新16/01:真正糟糕的部分是,即使消息是从同一个域发送,但在被另一个域重定向后,它确实会中断.
有趣的是,这种"安全功能"可以反过来用来完全绕过跨域限制.
在父窗口中example.com:
<script>
window.open("http://example.com/dummy_redirect");
window.addEventListener('message', function(ev) {console.log(ev.data)})
</script>
在example.com服务器上:
GET /dummy_redirect 302 http://jsfiddle.net/b6yfbunw/
弹出窗口将打开您的域,重定向到jsfiddle,postMessage调用将在IE中工作.您甚至可以在此之后导航到任何域,并继续对父窗口进行postMessage调用.
nic*_*k_w 14
它坏了吗？好吧,有点.
我尝试了各种各样的想法,无法让你的jsFiddle中的代码工作.看看这篇MSDN博客文章,我们发现postMessage只能在旧版IE中的IFrame之间工作,IE11尚未修复.
那篇文章链接到问题的演示.有几种解决方法涉及调用脚本window.opener.然而,正如该博客所述(强调我的):
遗憾的是,这种解决方法通常是不可能的,因为同源策略规定弹出窗口和window.opener页面必须来自同一个来源才能调用彼此的脚本函数.
所以看起来这样做的唯一方法就是这样,其中孩子托管在父母的IFrame中.我在这里根据您的代码创建了一个类似的演示.它非常简单,但会contentWindow向IFrame 发送消息,而IFrame又会响应.
我看到建议使用MessageChannel,但我也想知道使用Web Workers是否值得调查,尽管它们的使用当然取决于你的任务的性质.还有这个问题的答案,其中使用了IFrame方法,但是使用jQuery UI对话框来显示它 - 我想如果您愿意,可以使用Bootstrap中的模态执行相同的操作.
以供参考:
HTML
<iframe id="iframe" src="http://jsbin.com/iLapokOS/7/"></iframe>
<div id="log"></div>
<button id="post-message-button">Post message to window</button>
父脚本
var wnd;
$(document).ready(function() {
$('#log').append('listening...');
wnd = $('#iframe')[0].contentWindow;
window.addEventListener('message', function(e){
$('#log').append('<br/>Received message: ' + JSON.stringify(e.data));
}, false);
$('#post-message-button').click(function() {
if(!wnd){
return;
}
$('#log').append('<br/>sending...');
wnd.postMessage('Hello?', 'http://jsbin.com');
});
});
子HTML和JS
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script>
$(document).ready(function() {
window.addEventListener("message", function(e){
$('body').append('<br/>Origin: ' + e.origin);
$('body').append("<br/>Received message: " + JSON.stringify(e.data));
e.source.postMessage('Hello yourself', e.origin);
}, false);
});
</script>
</body>
</html>
有几个地方提到了一种iframe解决方法，但我所看到的唯一方法是将消息发送到iframe.
下面是一个接收消息的例子iframe：
父页面(http://first-domain.com/receive-message.html)
<html>
<head>
<script>
window.addEventListener('message', console.log.bind(console, 'Got message:'));
</script>
</head>
<body>
<iframe src="http://second-domain.com/send-message.html"></iframe>
</body>
</html>
子页面(http://second-domain.com/send-message.html)
<html>
<head>
<script>
window.parent.postMessage('hi there', '*');
</script>
</head>
<body></body>
</html>
| 归档时间： |
|
| 查看次数： |
26080 次 |
| 最近记录： |