Skip to content

Instantly share code, notes, and snippets.

@Eccenux
Last active October 13, 2015 21:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Eccenux/294da7dbbea54b5e001a to your computer and use it in GitHub Desktop.
Save Eccenux/294da7dbbea54b5e001a to your computer and use it in GitHub Desktop.
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