Wie Fensterhöhe in Winkel js

Ich benutze iframe, um den Inhalt mit angularjs mit ionischen Rahmen anzuzeigen. Hier muss ich Fensterhöhe als iframe Höhe geben, so habe ich verwendetWie Fensterhöhe in Winkel js

$scope.iframeHeight = window.innerHeight;

Aber, ich bin 1/4-Bildschirm immer nur.

Hier was ich bisher versucht 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>

Bin ich etwas fehlt?

Quelle

2015-02-25 UI_Dev

tpyo: 'iFrameHeight'! ==' iframeHeight' –

Kleiner Punkt - Um Testbarkeitsprobleme auf der ganzen Linie zu vermeiden, würde ich Ihrer Funktion ein $ window Argument hinzufügen und stattdessen $ window.innerHeight verwenden. – Dunc

ist window.innerHeight eine benutzerdefinierte Funktion? Ich kann keine Dokumentation darüber finden. Update: habe es, https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight –

Hauptproblem: Sie müssen 'px' Einheiten zu window.innerHeight hinzufügen Nummer. Und der zweite, variable Name ist iframeHeight nicht iFrameHeight. Fester Ausdruck wird wie folgt aussehen:

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

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

Quelle

2015-02-25 07:43:41 dfsq

Großartig! Hut ab :) –

Da AngularJS enthält ein kleiner Teil jQuery selbst Sie verwenden können:

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

oder

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

Quelle

2015-02-25 07:43:39 DonJuwe

Das Fenster Objekt, obwohl global zur Verfügung hat Testbarkeit Fragen als Referenz in dem Winkel docs https://docs.angularjs.org/api/ng/service/ $ Fenster .Es wie es ist nicht ein Problem sieht auf Ihr Code, aber für gute Praxis, können Sie einen $ Fenster Service injizieren, dann verweisen Sie stattdessen und natürlich das "px" Problem auf der Unterseite.

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

Später, wie vorher gesagt;

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

Quelle

2016-04-19 10:09:41 kmarshy

calculte Fenster Höhe mit Winkel

$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 für die Verwendung dieser Code die erforderlichen Abhängigkeiten in Winkel hinzuzufügen. Hoffe, das wird Ihnen helfen, die Höhe des Fensters zu berechnen.

Quelle

2017-07-26 07:00:12

Wie Fensterhöhe in Winkel js

Antwort

Verwandte Themen