我正在寻找一种方法来获取iframe contentWindow对象,并在用户的某些操作后向其发布消息.我目前的解决方案根本没有角度感觉(特别是从控制器访问DOM).
我创建了一个说明问题的plunker：
http://plnkr.co/edit/aXh4jydWGWfK3QQD4edd
执行postMessage是一种更有棱角的方式吗？
控制器：
app.controller('Main',function($scope) {
$scope.click = function() {
var iframe = document.getElementById("inner").contentWindow;
iframe.postMessage("Hello iframe",'*');
}
});
HTML：
<body ng-controller="Main">
<button ng-click="click()">send message</button>
<iframe id="inner" src="inner.html"/>
</body>
我知道你的问题已经超过一年了,但我最近有类似的需求,所以我想我会发布我的解决方案.最初我有像你发布的东西,但正如你所指出的那样,这并不是非常“有角度”.它也不容易测试,我认为它也不是非常“Angular”.
相反,我重构了我的代码以将iframe实现为指令.然后我从app的控制器发出$broadcast()事件并让指令听取它们.这段代码可能会有相当多的改进,但它感觉更加“Angular”,并避免直接触及DOM.
'use strict';
angular.module('app')
.directive('angularIframe',['$rootScope',function($rootScope) {
return {
restrict: 'E',replace: true,template: '<iframe id="game" src="/iframe/index.html" width="100%" height="100%" frameboarder="0" scrolling="no"></iframe>',link: function(scope,elem) {
var off = $rootScope.$on('app.postmessage',function(ev,data,targetOrigin) {
var str = JSON.stringify(data);
targetOrigin = targetOrigin || '*';
elem[0].contentWindow.postMessage(str,targetOrigin);
});
// See: https://stackoverflow.com/a/14898795/608884
elem.on('$destroy',function() {
off();
});
}
};
}]);
然后,您可以通过添加< game>< / game>来使用此指令.你应用程序中的某个地方.
在控制器中,您现在可以广播app.postmessage事件以及一些数据来调用iframe上的postMessage()：
var myData = { foo: 'bar' };
$rootScope.$broadcast('app.postmessage',myData);
