Question

在创建eventlistner之后，它会等到postMessage然后更新IframeHeight，但是它不会立即更改高度，只有当我执行某些活动时才会在ui上触发更改（例如，单击，键入输入框）等等）。

$scope.getIframeHeight = function(){
    $scope.IframeHeight = "800";
    if (!window.addEventListener) {
        // IE8 support (could also use an addEventListener shim)
        window.attachEvent('onmessage', $scope.handleMessage);
    } else {
        window.addEventListener('message', $scope.handleMessage, false);
    }
};

$scope.handleMessage = function(event){
    var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
    if (origin !== "http://localhost:8060")
        return;
    console.log('parent received message!:  ',event.data);
    $scope.IframeHeight = event.data;
};


<iframe class='iframe' id='iframe' scrolling='no' ng-style="{'height': IframeHeight + 'px'}" width="100%"
        frameborder='0' ng-src="{{trustSrc(data.IframeSRC)}}">
</iframe>

Answer 1

所以我不知道为什么对$ scope.IframeHeight所做的更改没有反映出来，但这对我有用：

$scope.handleMessage = function(event){
var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
if (origin !== "http://localhost:8060")
    return;
console.log('parent received message!:  ',event.data);
***$scope.$apply(function(){
        $scope.IframeHeight = event.data;
    });***
};

ng-style不会基于eventListner进行更新

1 个答案: