Simple Frame Postman
/** | |
Simple Frame Postman | |
version 1.1.2 | |
Author: Maciej "Nux" Jaros | |
License: CC-BY or MIT (at ones choosing) | |
Usage (simple setup): | |
// setup | |
var oPostman = new FramePostman({ | |
strDestFrameId : 'iframe_id', // id of a frame (or iframe) element that will receive messages | |
strDestFrameDomain : "nux:8081", // domain of the frame e.g. 'www.example.com', 'www.example.com:8080'... | |
strMsgSourceDomain : "localhost:8081" // domain of the sender (the window that is sending the message) formated as above | |
}); | |
// sending data example | |
document.getElementById("send-button").onclick = function(e) | |
{ | |
oPostman.send(document.getElementById("msg").value); | |
e.preventDefault(); | |
}; | |
// receive data (in another frame) | |
oPostman.initReceiver(function(strMsg) | |
{ | |
document.getElementById("test").textContent = "parent said: " + strMsg; | |
}); | |
More advanced setup (with RegExp match instead of strMsgSourceDomain): | |
var oPostman = new FramePostman({ | |
strDestFrameId : 'iframe_id', // id of a frame (or iframe) element that will receive messages | |
strDestFrameDomain : "nux:8081", // domain of the frame e.g. 'www.example.com', 'www.example.com:8080'... | |
// Domain of the sender regexp match (only for advanced users!). | |
// Note. Use "://" match at the begining of your regexp and $ at the end to avoid too broad matches. | |
reMsgSourceBaseUrls : /:\/\/(localhost(:[0-9]+)?|nux(:[0-9]+)?|nuxlap7(:[0-9]+)?)$/ | |
}); | |
*/ | |
function FramePostman(oParams) | |
{ | |
this.strDestFrameId = oParams.strDestFrameId; | |
this.strDestFrameBaseUrl = "http://"+oParams.strDestFrameDomain; | |
if (typeof(oParams.strMsgSourceDomain)!='undefined') | |
{ | |
this.strMsgSourceBaseUrl = "http://"+oParams.strMsgSourceDomain; | |
} | |
if (typeof(oParams.reMsgSourceBaseUrls)!='undefined') | |
{ | |
this.reMsgSourceBaseUrls = oParams.reMsgSourceBaseUrls; | |
} | |
/** | |
Send given message (strMsg) - should be run outside the frame | |
*/ | |
this.send = function(strMsg) | |
{ | |
// debug | |
if (typeof(window.console)=="object" && typeof(window.console.log)=="function") | |
{ | |
console.log ('send to:'+this.strDestFrameBaseUrl); | |
} | |
var winFrame = document.getElementById(this.strDestFrameId).contentWindow; | |
winFrame.postMessage( | |
strMsg, | |
this.strDestFrameBaseUrl | |
); | |
} | |
/** | |
Inits reciever - should be run inside the frame | |
funMsgReceiver is a function that will be called upon receiving the message | |
*/ | |
this.initReceiver = function(funMsgReceiver) | |
{ | |
var _this = this; | |
window.addEventListener("message", function(e) | |
{ | |
// debug | |
if (typeof(window.console)=="object" && typeof(window.console.log)=="function") | |
{ | |
console.log ('received from:'+e.origin); | |
//debugger; | |
} | |
if (typeof(_this.reMsgSourceBaseUrls)!='undefined') | |
{ | |
if (e.origin.search(_this.reMsgSourceBaseUrls)<0) | |
{ | |
return; | |
} | |
} | |
else if (e.origin !== _this.strMsgSourceBaseUrl) | |
{ | |
return; | |
} | |
funMsgReceiver(e.data); | |
}, false); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment