如何在角度js中获取窗口高度答案

【问题标题】：How to get window height in angular js如何在角度js中获取窗口高度
【发布时间】：2015-04-27 03:02:38
【问题描述】：

我正在使用 iframe 使用带有离子框架的 angularjs 来显示内容。在这里，我需要将窗口高度作为 iframe 高度，所以我使用了

  $scope.iframeHeight = window.innerHeight;

但是，我只得到 1/4 屏幕。

这是我到目前为止所尝试的。

index.html

<!DOCTYPE html>
<html ng-app="ionicApp">
    <head>
    <!-- ionic/angularjs CSS -->
    <link href="css/ionic.css" rel="stylesheet">
    <link href="css/ionic-custom.css" rel="stylesheet">
    <!-- ionic/angularjs js bundle -->
    <script type="text/javascript" src="js/ionic.bundle.js"></script>
    <script>
    angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) { 
  $scope.iframeHeight = window.innerHeight;
});
    </script>
    </head>
    <body ng-controller="MainCtrl">
        <iframe src="http://stackoverflow.com" ng-style="{height:iFrameHeight}" id="iframeid" width="100%" ></iframe>   
    </body>
</html>

我错过了什么吗？

【问题讨论】：

tpyo: iFrameHeight !== iframeHeight
小点 - 为了避免可测试性问题，我会在你的函数中添加一个 $window 参数并改用 $window.innerHeight。
window.innerHeight 是自定义函数吗？我找不到关于它的文档。更新：知道了，developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

标签： javascript html angularjs iframe ionic-framework

【解决方案1】：

主要问题：您需要将 'px' 单位添加到 window.innerHeight 数字。第二个，变量名是iframeHeight 而不是iFrameHeight。固定表达式如下所示：

ng-style="{height: iframeHeight + 'px'}"

演示： http://plnkr.co/edit/NdQB5afQT7kMkf27k7wg?p=preview

【讨论】：

太棒了！向你致敬:)

【解决方案2】：

window 对象，虽然全局可用，但在 angular 文档 https://docs.angularjs.org/api/ng/service/$window 中有可测试性问题作为参考。看起来它在您的代码上不是问题，但为了良好实践，您可以注入 $window 服务然后参考相反，当然还有底部的“px”问题。

   angular.module('ionicApp', ['ionic']) 
    .controller('MainCtrl', function($scope, $window) { 
   $scope.iframeHeight = $window.innerHeight;
     });

稍后，如前所述；

  ng-style="{height: iframeHeight + 'px'}"

【讨论】：

【解决方案3】：

由于 AngularJS 本身包含一小部分 jQuery 你可以使用：

// Returns height of browser viewport
$scope.iframeHeight = $(window).height();

或

// Returns height of HTML document
$scope.iframeHeight = $(document).height();

【讨论】：

【解决方案4】：

使用角度计算窗口高度

$scope.screenHeight = '';
$scope.calculateoriginalWidth = function() {
    var width = $window.innerWidth;
    $rootScope.originalWidth = width;
}
$scope.calculateScreenHeight = function() {
    var height = $window.innerHeight;
    var width = $window.innerWidth;
    var subheight = 0;
    var headerheight = document.getElementById('headerTitle1');
    var headerheight2 = document.getElementById('headerTitle2');
    if (headerheight) {
        subheight += headerheight.offsetHeight;
    }
    if (headerheight2) {
        subheight += headerheight2.offsetHeight;
    }

    $scope.screenHeight = height - subheight - 20;
    $rootScope.screenHeight = $scope.screenHeight;
    $scope.screenWidth = width;
    $rootScope.screenWidth = $scope.screenWidth;
}

var reg = $scope.$on('screenResize', function($evt, args) {
    $scope.calculateScreenHeight();
    $scope.$apply();
})

window.onresize = function(event) {
    $scope.$apply(function() {
    $scope.calculateScreenHeight();
    })
};

$scope.calculateScreenHeight();
$scope.calculateoriginalWidth();

您需要在 Angular 中添加所需的依赖项才能使用此代码。希望这可以帮助您计算窗口的高度。

【讨论】：