2

我目前正在开发一个 angularJS 应用程序。我使用 Angular-Seed 作为开始项目的模板。

我需要创建一个 angularJS 应用程序，该应用程序在另一家公司的 JSP 页面上的 iframe 内运行。他们使用 iframe 与我的应用程序进行通信"iframe.contentWindow.postMessage"。这是此类帖子的示例：

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");
};

我目前在我的 angularJS 应用程序中有两个页面：

'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'});
}]);

loading.html 页面如下所示：

<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>

控制器如下所示：

'use strict';

/* Controllers */

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

}])

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

}]);

我需要一个额外的 javascript 文件来监听这个iframe.contentWindow.postMessage事件。它看起来像这样：

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>");
}

问题是我想从'message.messagetype === "HANDSHAKE"'if 检查中与控制器通信。但我似乎无法访问它。是因为我的 index.html 上有这个 ng-view 吗？也许还有另一种方法可以做到这一点。欢迎任何建议！

亲切的问候！

4

1 回答 1

0

看起来我不需要 javascript 来与 iframe 进行通信，但是 angularJS 本身就可以。

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

于 2014-03-25T14:47:48.713 回答