Javascript 使用postmessage发送消息
我目前正在做一个应用程序,它是必要的,以发送两个域之间的信息(将在页面加载) 网站1: 创建iFrame> 将Postmessage发送到网站2Javascript 使用postmessage发送消息,javascript,iframe,cross-browser,sendmessage,postmessage,Javascript,Iframe,Cross Browser,Sendmessage,Postmessage,我目前正在做一个应用程序,它是必要的,以发送两个域之间的信息(将在页面加载) 网站1: 创建iFrame> 将Postmessage发送到网站2 window.onload = function () { iframe = document.createElement("IFRAME"); iframe.setAttribute("src", "WEBSITE 2"); iframe.style.width = "200px"; iframe.style.height = "200px";
window.onload = function () {
iframe = document.createElement("IFRAME");
iframe.setAttribute("src", "WEBSITE 2");
iframe.style.width = "200px";
iframe.style.height = "200px";
iframe.style.border = "none"; //please do not show the iframe JS.
iframe.id = "lol";
document.body.appendChild(iframe);
document.getElementById("test").innerHTML = "Test!"
window.addEventListener("message", listener, false);
window.setTimeout(sendMessage,100)
}
function sendMessage(e) {
var receiver = document.getElementById('lol').contentWindow;
receiver.postMessage('Hello Treehouse!', 'WEBSITE 2');
}
function listener(event){
if ( event.origin !== "WEBSITE 2" )
return //website isn't ours bro
document.getElementById("test").innerHTML = event.data
}
网站2
从网站1获取Postmessage>
创建iFrame(?)>
将Postmessage发送到网站1(?)
iFrame是在网站2上创建的,在与网站1和网站2进行循环之后,但是从网站2发送到网站1的Postmessage显示在额外的iFrame中,是否可以将消息发送回浏览器中打开的网站1
显示内容的示例:
测试!
测试!
你好
测试
谢谢 如果我看得对,在Website 2中的sendMessage()函数中,看起来您正在获取新创建的iframe元素,然后向其发布消息。实际上,你真的想在网站1上发布消息 从网站2…尝试以下内容
window.parent.postMessage("hello website 1", "*");
要响应Event.origin域,您可以使用消息的
Event.source
// Child website:
window.addEventListener("message", evt => {
// if (evt.origin !== "http://example.com") return;
console.log(evt.data) // "Question!"
evt.source.postMessage("Response!", evt.origin);
});
源代码
对发送消息的窗口对象的引用;您可以使用它在两个具有不同来源的窗口之间建立双向通信
// Child website:
window.addEventListener("message", evt => {
// if (evt.origin !== "http://example.com") return;
console.log(evt.data) // "Question!"
evt.source.postMessage("Response!", evt.origin);
});