UI_*_*Dev 17 html javascript iframe angularjs ionic-framework
我正在使用iframe来使用angularjs和离子框架显示内容.在这里,我需要给窗口高度作为iframe高度,所以我用过
$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>
我错过了什么吗？
dfs*_*fsq 11
主要问题:您需要将"px"单位添加到window.innerHeight数字中.而第二个,变量名iframeHeight不是iFrameHeight.修复后的表达式如下:
ng-style="{height: iframeHeight + 'px'}"
演示: http ://plnkr.co/edit/NdQB5afQT7kMkf27k7wg？p = preview
小智 6
窗口对象,虽然全球可用的可测性有问题,如角文档参考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'}"
由于AngularJS本身包含一小部分jQuery,因此您可以使用:
// Returns height of browser viewport
$scope.iframeHeight = $(window).height();
要么
// Returns height of HTML document
$scope.iframeHeight = $(document).height();
| 归档时间： |
|
| 查看次数： |
42999 次 |
| 最近记录： |