How to get window height in angular js
Solution 1
Main problem: you need to add 'px' units to window.innerHeight
number. And the second one, variable name is iframeHeight
not iFrameHeight
. Fixed expression will look like:
ng-style="{height: iframeHeight + 'px'}"
Demo: http://plnkr.co/edit/NdQB5afQT7kMkf27k7wg?p=preview
Solution 2
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.
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope, $window) {
$scope.iframeHeight = $window.innerHeight;
});
Later, as said before;
ng-style="{height: iframeHeight + 'px'}"
Solution 3
Since AngularJS contains a small part of jQuery by itself you can use:
// Returns height of browser viewport
$scope.iframeHeight = $(window).height();
or
// Returns height of HTML document
$scope.iframeHeight = $(document).height();
Comments
-
UI_Dev almost 4 years
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
$scope.iframeHeight = window.innerHeight;
But, I am getting 1/4th screen only.
Here what I tried so far.
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>
Am I missing something?
-
UI_Dev over 9 yearsGreat! kudos to you :)