私はiframeを使用して、ionic framework。
$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>
何か不足していますか?
主な問題:window.innerHeight
番号に「px」ユニットを追加する必要があります。 2番目の変数名はiframeHeight
ではなくiFrameHeight
です。固定式は次のようになります。
ng-style="{height: iframeHeight + 'px'}"
ウィンドウオブジェクトは、グローバルに利用できますが、angular docs https://docs.angularjs.org/api/ng/service/ $ windowの参照としてテスト容易性の問題があります。それはあなたのコードの問題ではないように見えますが、良い習慣のために、あなたは代わりにそれを参照し、もちろん下部の「px」問題を参照する$ windowサービスを注入することができます。
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope, $window) {
$scope.iframeHeight = $window.innerHeight;
});
後で、前に言ったように。
ng-style="{height: iframeHeight + 'px'}"
AngularJSにはjQueryのごく一部が含まれているため、以下を使用できます。
// Returns height of browser viewport
$scope.iframeHeight = $(window).height();
または
// Returns height of HTML document
$scope.iframeHeight = $(document).height();
角度を使用してウィンドウの高さを計算する
$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();
このコードを使用するには、angularに必要な依存関係を追加する必要があります。これがウィンドウの高さの計算に役立つことを願っています。