基于angular的退出全屏,全屏显示以及关闭系统

html中的代码:
<li class="dropdown" id="dropdown4">
    <a href="#"  class="dropdown-toggle" data-toggle="dropdown" ng-bind="window"><b class="caret"></b></a>
    <ul class="dropdown-menu" ng-controller="screen">
        <li id="view-fullscreen">
            <a href="#"  ng-click="fullScreen()">全屏显示</a>
        </li>
        <li class="divider"></li>
        <li id="cancel-fullscreen">
            <a href="#" ng-click="exitScreen()">退出全屏</a>
        </li>
        <li class="divider"></li>
        <li id="sytemExit">
            <a href="#" ng-click="systemClose()">关闭窗口</a>
        </li>
    </ul>
</li>

angularjs的代码:
var apiGatewayCtrls = angular.module('apiGatewayCtrls', ['ionic']);
apiGatewayCtrls.controller('screen',function ($scope,$window) {
    $scope.fullScreen = function () {
        var viewFullScreen = document.getElementById("view-fullscreen");
        if (viewFullScreen) {
            viewFullScreen.addEventListener("click", function () {
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                }
                else if (docElm.msRequestFullscreen) {
                    docElm = document.body; //overwrite the element (for IE)
                    docElm.msRequestFullscreen();
                }
                else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                }
                else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                }
            }, false);
        }
    }
    $scope.exitScreen = function () {
        var cancelFullScreen = document.getElementById("cancel-fullscreen");
        if (cancelFullScreen) {
            cancelFullScreen.addEventListener("click", function () {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
                else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }, false);
        }
    }
    $scope.systemClose = function () {
        var sytemExit = document.getElementById("sytemExit");
        if (sytemExit) {
            sytemExit.addEventListener("click", function () {
                if (confirm("您确定要关闭本系统吗?")) {
                    $window.close();
                }
                else {
                }
            })
        }
    }
});
 
 
效果图片:
 
 
 

猜你喜欢

转载自blog.csdn.net/khh8023lyf/article/details/78729804