Example demonstrating communication between a wrapper and an Angular application within an IFrame using postMessage.
Navigate to wrapper.html
Currently postMessage is supported in all major browsers. Specific versions supported can be viewed here.
Partial support in IE refers to only working in frames/iframes (not other tabs/windows). Also in IE an object cannot be sent using postMessage.
Cross domain messaging is enabled by defining an origin attribute. This application opens up support for multiple domains by using '*' as the defined origin.
In the wrapper get a reference to the IFrame content window:
var win = document.getElementById("iframe").contentWindow;
Run the postMessage connect method:
win.postMessage('connect', '*');
In the IFrame get a reference to the postMessage sender and add to the scope:
scope.sender = event.source;
Internet Explorer 8 and 9, and Firefox versions 6.0 and below only support strings as postMessage's message. To send objects use a JSON string e.g. JSON.stringify. To parse the JSON string to a JSON object either use JQuery $.parseJSON(string); or in AngularJS use angular.fromJson(string);.
To send a message from the wrapper stringify the JSON:
var message = JSON.stringify({message: document.getElementById("message").value});
And post the message:
win.postMessage(message, '*');
To send a message from the IFrame stringify the JSON:
var m = JSON.stringify({status: 200, message: message});
Post the message:
$scope.sender.postMessage(m, '*');
To receive a message from the wrapper add an event listener to the window message event:
addEvent(window, 'message', function (e) {});
Parse the JSON string:
var response = $.parseJSON(e.data);
To receive a message from the IFrame add an event listener to the window message event:
$window.addEventListener('message', function(e) {});
Parse the JSON string:
var response = angular.fromJson(e.data);
Post message communication is via an attribute directive.
The directive controller handles posting a message from the IFrame to the wrapper. This is via an event listener assigned to a broadcasted event from the service class (see below).
The directive postLink() function assigns an event listener to the message event on the $window.
Messages are stored in a service. When stored the $apply() method is called on the $rootScope which ensures bindings are updated e.g. in the controller (see below).
The service outgoing attribute is called when sending a message to the directive to post to the wrapper. The service then broadcasts an outgoingMessage on the $rootScope which the directive handler will receive.
The messages array in the service class are bound to the scope within the controller using the service messages attribute. This is updated when the service calls $rootScope.$apply().
On send message the controller calls the outgoing attribute on the service passing a message value.
karma start
grunt test:unit
grunt test:e2e
So far:
- Windows: IE8+, Chrome and Firefox seem to work fine.
- OS X: Chrome, Safari and Firefox seem to work fine.