2

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!

8
  • Look at this stackoverflow.com/questions/15424910/… Commented Mar 25, 2014 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? Commented Mar 25, 2014 at 12:43
  • Jquery is loaded on the page :) Commented Mar 25, 2014 at 12:47
  • What does console.log(scope) gives as the output? Commented Mar 25, 2014 at 12:51
  • ChildScope $$childHead: null $$childTail: null $$listenerCount: Object $$listeners: Object $$nextSibling: null $$prevSibling: null $$watchers: null $id: "003" $parent: Scope msg: "Superhero" this: ChildScope proto: Scope Commented Mar 25, 2014 at 12:52

1 Answer 1

0

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.