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

Question

我正在尝试通过 Angular 设置 iframe 内容高度

我有类似的东西

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

在我的 Controller 中

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

如何通过我的 Controller 设置 iframe 内容高度？

谢谢!

Answer 1

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

ng-init不等于 $(window).on("load", function(){...}) , 更多信息 ng-init这里:https://docs.angularjs.org/api/ng/directive/ngInit .这就是为什么您会收到 undefined为 x和 y ，因为当执行该代码时，iframe 尚未加载。

在 angular 中，从 Controller 访问 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' />