Javascript 如何在angular js中获取窗口高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28713598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get window height in angular js
提问by UI_Dev
I 'm using iframe to display the contents using angularjs with ionic framework. Here, I need to give window height as iframe height, so I have used
我正在使用 iframe 使用带有离子框架的 angularjs 来显示内容。在这里，我需要将窗口高度指定为 iframe 高度，所以我使用了
$scope.iframeHeight = window.innerHeight;
But, I am getting 1/4th screen only.
但是，我只得到 1/4 的屏幕。
Here what I tried so far.
这是我到目前为止所尝试的。
index.html
索引.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>
Am I missing something?
我错过了什么吗？
采纳答案by dfsq
Main problem: you need to add 'px' units to window.innerHeightnumber. And the second one, variable name is iframeHeightnot iFrameHeight. Fixed expression will look like:
主要问题：您需要在数字中添加“px”单位window.innerHeight。第二个，变量名iframeHeight不是iFrameHeight. 固定表达式将如下所示：
ng-style="{height: iframeHeight + 'px'}"
回答by kmarshy
The window object, although globally available has testability issues as reference in the angular docs https://docs.angularjs.org/api/ng/service/$window .It looks like its not an issue on your code though but for good practice, you can inject a $window service then reference that instead and of course the "px" issue on the bottom.
window 对象，虽然全球可用，但在 angular docs https://docs.angularjs.org/api/ng/service/$window 中有可测试性问题作为参考。它看起来不是你的代码的问题，但为了良好的实践，你可以注入一个 $window 服务，然后引用它，当然还有底部的“px”问题。
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope, $window) {
$scope.iframeHeight = $window.innerHeight;
});
Later, as said before;
后来，如前所说；
ng-style="{height: iframeHeight + 'px'}"
回答by DonJuwe
Since AngularJScontains a small part of jQueryby itself you can use:
由于AngularJS本身包含一小部分jQuery，您可以使用：
// Returns height of browser viewport
$scope.iframeHeight = $(window).height();
or
或者
// Returns height of HTML document
$scope.iframeHeight = $(document).height();
回答by Bipin Shilpakar
Calculte windows height using angular
使用角度计算窗口高度
$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();
You need to add the required dependencies in angular for using this code. Hope this will help you to calculate the height of the window.
您需要在 angular 中添加所需的依赖项才能使用此代码。希望这能帮助您计算窗口的高度。
