Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:

I'm currently developing an angularJS application. I'm using Angular-Seed as a template to start of the project.

I need to create an angularJS application that's running inside an iframe on a JSP page form another company. They communicate with my application in the iframe using "iframe.contentWindow.postMessage". Here's an example of such a post:

var btnHandShake = document.getElementById('btnHandShake');
btnHandShake.onclick = function () {
    var dataObject = {
        messagetype: "HANDSHAKE",
        messagecontent: {
            user: {
                username: "username",
                password: "password"
            }
        }
    }

    var message = JSON.stringify(dataObject);
    iframe.contentWindow.postMessage(message, "https://serverurl:8080");
};

I currently have two pages in my angularJS application:

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', [
    'ngRoute',
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers'
]).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/loading', {templateUrl: 'partials/loading.html', controller: 'LoadingController'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/loading'});
}]);

The loading.html page looks like this:

<style>
.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
}
</style>

<script>
var opts = {
    lines: 11, // The number of lines to draw
    length: 15, // The length of each line
    width: 10, // The line thickness
    radius: 30, // The radius of the inner circle
    corners: 1, // Corner roundness (0..1)
    rotate: 0, // The rotation offset
    direction: 1, // 1: clockwise, -1: counterclockwise
    color: '#000', // #rgb or #rrggbb
    speed: 0.6, // Rounds per second
    trail: 60, // Afterglow percentage
    shadow: false, // Whether to render a shadow
    hwaccel: false, // Whether to use hardware acceleration
    className: 'spinner', // The CSS class to assign to the spinner
    zIndex: 2e9, // The z-index (defaults to 2000000000)
    top: 'auto', // Top position relative to parent in px
    left: 'auto' // Left position relative to parent in px
};

var spinner = null;
var spinner_div = 0;

$(document).ready(function () {
    spinner_div = $('#spinner').get(0);
    if (spinner == null) {
        spinner = new Spinner(opts).spin(spinner_div);
    } else {
        spinner.spin(spinner_div);
    }
});
</script>

<div id='spinner' class='spinner'></div>

The controllers look like this:

'use strict';

/* Controllers */

angular.module('myApp.controllers', []).
controller('LoadingController', ['$scope', function ($scope) {

}])

.controller('MyCtrl2', [function () {

}]);

I need an extra javascript file that needs to listen for this iframe.contentWindow.postMessage event. It looks like this:

function postMessageListener(event) {
registerIncoming(event);

//convert data to object

var message = JSON.parse(event.data);
var responseType = "";

if (message.messagetype === "HANDSHAKE") {
    responseType = "HANDSHAKE_OK";
} 

if (responseType !== "") {
    var response = { messagetype: responseType};
    sendResponse(JSON.stringify(response), event.origin);
} else {
    console.log("Unknown messagetype");
}
}

function sendResponse(response, origin) {
window.top.postMessage(response, origin);
}

//Listen to message from child window
if (window.addEventListener) {
// For standards-compliant web browsers
window.addEventListener("message", postMessageListener, false);
} else {
window.attachEvent("onmessage", postMessageListener);
}

function registerIncoming(event) {

var message = JSON.parse(event.data);

if (message.messagetype === "HANDSHAKE") {

    var applicationScope = angular.element($("#ng-view-id")).scope();

}

$("#logger").prepend('<li class="bg-info">' + new Date().toLocaleTimeString() + " " + message + "</li>");
}

The problem is that I want to communicate with the controller from within the 'message.messagetype === "HANDSHAKE"' if check. But I can't seem to access it. Is it because of this ng-view on my index.html? Maybe there is another way to do this. Any suggestions are welcome!

Kind regards!

share|improve this question
    
Look at this stackoverflow.com/questions/15424910/… – Jayram Mar 25 '14 at 12:36
    
I've already found that answer but it doesn't seem to work for me. I've added an id to the ng-view tag like this: '<div id="outer" ng-view></div>' and then used the 'var scope = angular.element($("#outer")).scope(); console.log(scope);' but still no controller? – TurboTheunis Mar 25 '14 at 12:43
    
This requires Jquery – Jayram Mar 25 '14 at 12:46
    
Jquery is loaded on the page :) – TurboTheunis Mar 25 '14 at 12:47
    
What does console.log(scope) gives as the output? – Jayram Mar 25 '14 at 12:51

1 Answer 1

up vote 0 down vote accepted

Looks like I don't need javascript to communicate with the iframe, but it's possible with angularJS itself.

https://github.com/newtriks/angularjs-post-message-testing-project

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.