我正试图做一个简单的postMessage例子......
删除这些条件中的任何一个,并且工作正常:-)
但据我所知,postMessage当两个窗口共享一个原点时,窗口之间似乎只能在IE10中工作.(嗯,事实上 - 奇怪的是 - 行为稍微宽容一点:共享主机的两个不同的起源似乎也有效).
(注意:这个问题触及了问题,但它的答案是关于IE8和IE9 - 而不是10)
更多细节+例子......
<!DOCTYPE html>
<html>
<script>
window.addEventListener("message", function(e){
console.log("Received message: ", e);
}, false);
</script>
<button onclick="window.open('http://jsbin.com/ameguj/1');">
Open new window
</button>
</html>
<!DOCTYPE html>
<html>
<script>
window.opener.postMessage("Ahoy!", "*");
</script>
</html>
这适用于:http://jsbin.com/ahuzir/1 - 因为两个页面都托管在同一个源(jsbin.com).但是将第二页移到其他地方,它在IE10中失败了.
html5 compatibility postmessage cross-browser internet-explorer-10
我有两个窗口:窗口A和窗口B.
问题:
我知道这样做的两种方式:
但这两种方式并不那么优雅.
例如,获得窗口B的引用并使用window.postMessage()(HTML5)会很不错
最终的目标是制作像facebook这样的东西,如果你打开4个Facebook标签并在一个标签中聊天,聊天是最新的每个Facebook标签,这是整洁的!
当我使用jQuery事件监听器来处理消息事件时,如下所示:
$(window).on('message', function(e) {
var data = e.data; // data = undefined
});
数据未定义!我确定我已将数据传递到当前窗口.因为如果我使用"addEventListener",一切顺利!
所以有什么问题？
我正试着打电话
parent.postMessage(obj, 'whatever');
在iframe中,我收到此错误: Uncaught DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned.
当消息出现时,似乎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需要一个可序列化的对象). …
javascript internet-explorer postmessage cross-browser cross-domain
有没有什么好的工具允许开发人员使用postMessage正确调试windows之间发送的消息？
或者也许是Firebug的插件？
我不知道该怎么办.我尝试了不同来源的几个示例代码,我在不同的浏览器中尝试过它们(从Chrome 9到FF 4),似乎仍然没有使用"postMessage"功能.JS控制台没有给我什么,没有一个错误,仍然没有发生任何事情:框架不想通信.完全没有.这甚至不是跨域的:两个帧都来自我的域名.
以下是上次尝试的示例代码:父框架:
<iframe src="IFRAME_URL"></iframe>
<script>
window.addEventListener( "message",
function (e) {
if(e.origin !== 'DOMAIN'){ return; }
alert(e.data);
},
false);
</script>
儿童框架:
<html>
<head></head>
<body>
<script>
top.postMessage('hello', 'DOMAIN');
</script>
</body>
非常感谢,非常感谢
我正在开发一个网站,其中包含使用postMessage调整到正确高度的跨域iframe.我唯一的问题是确定哪个iframe具有哪个高度.我目前设置的方式是,当一个iframe将其高度发送给父级时,所有iframe的高度都会更改.
家长:
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function(e) {
$('iframe').height(e.data);
}, false);
IFRAME:
var updateHeight = function() {
if(window.parent) {
window.parent.postMessage($('.widget').outerHeight(), '*');
}
};
有没有办法确定哪个iframe发送了这个message事件？
我通常使用HTML5 PostMessage API将iframed内容中的信息传递给父框架.最近我在Android WebView中使用了我的内容(据我所知,这是iframe的原生Android相当).本机应用程序是否有办法监听我发送给他们的PostMessage事件？
我知道addJavascriptInterface存在,我只是希望有一种方法可以重用我现有的PostMessage代码,而无需编写新的东西.
到目前为止,我只看过postmessage的教程,其中一个窗口发送一种消息,另一个窗口只以一种方式解释消息.
如果我想在windows之间进行多种不同的交互,那么postmessage可以处理吗？
这是否违背了postmessage应该做的事情？
例如,如果我想能够来回发送自定义回调等,该怎么办？
postmessage ×10
javascript ×8
html5 ×5
cross-domain ×3
iframe ×3
android ×1
debugging ×1
jquery ×1