Как получить высоту окна в угловом js

Я использую iframe для отображения содержимого с использованием угловых элементов с ионным каркасом. Здесь, мне нужно дать высоту окна, как высота IFrame, поэтому я использовалКак получить высоту окна в угловом js

$scope.iframeHeight = window.innerHeight;

Но, я получаю только 1/4-й экран.

Вот что я пробовал до сих пор.

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>

ли я что-то отсутствует?

источник

2015-02-25 UI_Dev

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

Небольшая точка - чтобы избежать проблем с тестируемостью в строке, я бы добавил аргумент $ window к вашей функции и вместо этого использовал $ window.innerHeight. – Dunc

is window.innerHeight пользовательская функция? Я не могу найти документацию. обновление: получил его, https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight –

Основная проблема: вам нужно добавить 'точек' единиц в window.innerHeight номер. И второе, переменное имя iframeHeight не iFrameHeight. Фиксированное выражение будет выглядеть следующим образом:

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

Дем:http://plnkr.co/edit/NdQB5afQT7kMkf27k7wg?p=preview

источник

2015-02-25 07:43:41 dfsq

Отлично! вам нравится :) –

С AngularJS содержит небольшую часть JQuery сам по себе вы можете использовать:

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

или

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

источник

2015-02-25 07:43:39 DonJuwe

Объект окна, хотя доступны по всему миру имеют проблемы Тестируемости в качестве ссылки в угловых документах https://docs.angularjs.org/api/ng/service/ $ окна .Это выглядит как его не проблема на ваш код, хотя и для хорошей практики, вы можете ввести услугу $ window, а затем ссылаться на нее, и, конечно, на проблему «px» внизу.

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

Позже, как сказано ранее;

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

источник

2016-04-19 10:09:41 kmarshy

Calculte окна по высоте с помощью углового

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

Вам нужно добавить необходимые зависимости в угловой для использования этого кода. Надеюсь, это поможет вам рассчитать высоту окна.

источник

2017-07-26 07:00:12

Как получить высоту окна в угловом js

ответ

Смежные вопросы