webentwicklung-frage-antwort-db.com.de

Wie bekomme ich die Fensterhöhe in Winkel js?

Ich verwende iframe, um den Inhalt mithilfe von anglejs mit ionischem Framework anzuzeigen. Hier muss ich Fensterhöhe als iframe Höhe angeben, also habe ich verwendet

  $scope.iframeHeight = window.innerHeight;

Aber ich bekomme nur einen 1/4 Bildschirm.

Hier was ich bisher ausprobiert habe.

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>

Fehlt mir etwas?

javascripthtmlangularjsiframeionic-framework
17
UI_Dev

Hauptproblem: Sie müssen der window.innerHeight-Nummer "px" -Einheiten hinzufügen. Und der zweite, Variablenname, ist iframeHeight nicht iFrameHeight. Ein fester Ausdruck sieht folgendermaßen aus:

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

Demo:http://plnkr.co/edit/NdQB5afQT7kMkf27k7wg?p=preview

11
dfsq

Obwohl das Fensterobjekt global verfügbar ist, gibt es Testbarkeitsprobleme als Referenz in den Winkeln docs https://docs.angularjs.org/api/ng/service/ $ Aber für eine gute Praxis können Sie einen $ window-Dienst einfügen und darauf verweisen, und natürlich die "px" -Ausgabe unten.

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

Später wie gesagt;

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

Da AngularJS einen kleinen Teil von jQuery enthält, können Sie Folgendes verwenden:

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

oder 

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

Fensterhöhe mit Winkel berechnen 

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

Sie müssen die erforderlichen Abhängigkeiten in angle für die Verwendung dieses Codes hinzufügen. Ich hoffe, das hilft Ihnen, die Höhe des Fensters zu berechnen.

0
Bipin Shilpakar