web-dev-qa-db-fra.com

Comment obtenir la hauteur de la fenêtre en js angulaire

J'utilise iframe pour afficher le contenu en utilisant angularjs avec un cadre ionique. Ici, je dois donner la hauteur de la fenêtre comme hauteur iframe, alors j’ai utilisé

  $scope.iframeHeight = window.innerHeight;

Mais je ne reçois qu'un quart d’écran.

Voici ce que j'ai essayé jusqu'à présent.

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>

Est-ce que je manque quelque chose?

javascripthtmlangularjsiframeionic-framework
17
UI_Dev

Problème principal: vous devez ajouter des unités «px» au numéro window.innerHeight. Et le second, nom de variable est iframeHeight pas iFrameHeight. L'expression fixe ressemblera à:

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

Démo:http://plnkr.co/edit/NdQB5afQT7kMkf27k7wg?p=preview

11
dfsq

L'objet window, bien que globalement disponible, présente des problèmes de testabilité comme référence dans les documents angulaires https://docs.angularjs.org/api/ng/service/ $ window. mais pour des raisons pratiques, vous pouvez injecter un service $ window, puis le référencer et bien sûr le problème "px" en bas.

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

Plus tard, comme dit précédemment;

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

Puisque AngularJS contient une petite partie de jQuery seul, vous pouvez utiliser:

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

ou 

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

Calculer la hauteur de la fenêtre en utilisant angulaire 

$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();

Vous devez ajouter les dépendances requises dans angular pour utiliser ce code. J'espère que cela vous aidera à calculer la hauteur de la fenêtre.

0
Bipin Shilpakar