Question

我正在尝试通过角度

设置iframe内容高度

我有类似

的东西

<iframe id='iframe' width='100%' height='600px' data-ng-init="init('iframe')" 
 src='http://test.com' />

在我的控制器中

 $scope.init = function(id) {
            console.log($('#'+ id))  -> show my iframe
            var x= $('#'+ id)..contentWindow.document.body.scrollHeight;
            console.log(x) -> gives me undefined

            var y = $('#'+ id)..contentWindow;
            console.log(y) -> give me undefined too 
        }

如何通过控制器设置iframe内容高度？

谢谢！

Answer 1

您的代码中的一些观察结果：

ng-init不等同于$(window).on("load", function(){...})，此处有关ng-init的更多信息：https://docs.angularjs.org/api/ng/directive/ngInit。这就是为什么undefined和x获得y的原因，因为当执行该代码时，iframe尚未加载。
在angular中，从控制器访问DOM不是一个好主意，而是考虑在指令中进行那些操作。
如果您从angularjs开始，我建议您尽量不要使用jQuery。

在你的情况下，我认为你想要的是定义像iframeSetDimentionsOnload这样的指令并在那里设置高度。我会在几分钟内给你举个例子。

您的iframeSetDimensionsOnload指令：

yourApp.directive('iframeSetDimensionsOnload', [function(){
return {
    restrict: 'A',
    link: function(scope, element, attrs){
        element.on('load', function(){
            /* Set the dimensions here, 
               I think that you were trying to do something like this: */
               var iFrameHeight = element[0].contentWindow.document.body.scrollHeight + 'px';
               var iFrameWidth = '100%';
               element.css('width', iFrameWidth);
               element.css('height', iFrameHeight);
        })
    }
}}])

像这样使用：

<iframe iframe-set-dimensions-onload src='http://test.com' />

Answer 2

如果您的iframe是：

<iframe id='iframe' width='100%' height='600px' src='http://test.com' />

您的控制器可能类似于：

AppName.controller('someNameCtrl', ['$scope', '$window', function ($scope, $window) {
    $scope.width = '100%';
    $scope.height = '600px';

    angular.element($window).bind('resize', function(){
        $scope.width = $window.innerWidth;
        $scope.height = $window.innerHeight;
        console.log($scope.width, "x", $scope.height);

        // manuall $digest required as resize event
        // is outside of angular
        $scope.$digest();
    });
});

然后您可以将样式用作变量

<iframe id='iframe' ng-style="{ height: height, width: width }" src='http://test.com' />

如何在我的情况下设置iframe内容高度？

2 个答案: