Question

我正在尝试从iFrame源向父级发送自定义事件。我已经提到过Html5 - Cross Browser Iframe postmessage - child to parent?，但仍然无法将活动发送给我的父母。

以下是我将事件发送给父级的iFrame源代码：

window.parent.postMessage('onWidgetDisplayed', '*');

在我的父母中，我有angularJS控制器文件，我正在尝试监听此事件：

angular.module('common.controllers.vaultV2', [])
.controller('VaultV2Controller', ['$scope', '$rootScope', '$sce', function($scope, $rootScope, $sce) {

        $scope.iframeUrl = $sce.trustAsResourceUrl("https://some-url");

        window.addEventListener('onWidgetDisplayed', onWidgetDisplayedEvent, false);

        function onWidgetDisplayedEvent() {
            alert("onWidgetDisplayed event received at parent");
        }

}]);

这是html文件：

<div style="align: center">
    <iframe id="vault" ng-src="{{iframeUrl}}" style="width: 100%; height: 300px;  overflow: hidden" target="_parent"></iframe>
</div>

我做错什么了吗？我没有在浏览器控制台中看到任何错误。请帮忙！

Answer 1

postMessage发送一个message事件，而不是一个onWidgetDisplayed事件，因此您需要挂起message事件。如果您需要发送多种类型的消息，则可以传递任意的JavaScript值作为事件数据。您已经在传递字符串了，所以：

window.addEventListener("message", function(e) {
    if (/* check `e.origin` and make sure you're happy with it*/) {
        if (e.data === "onWidgetDisplayed") {
            onWidgetDisplayed.call(this, e);
        }
    }
}, false);

未调用事件监听器回调函数

1 个答案: