Question

我正在使用InAppBrowser-Plugin开发Cordova应用程序。我的想法是在InAppBrowser上显示一个Div / Buttons来执行Cordova本机代码。

问题在于InAppBrowser插件将自己置于顶级z-index上。我如何定义我调用InAppBrowser的Div的z-index并不重要。

我的代码：

<!DOCTYPE html>

    <meta name="format-detection" content="telephone=yes">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
<body ng-controller="unserhombergController">

    <div class="wrapper" id="wrapperID">
        <div class="linkwrap" id="linkwrapID">
            <div class="container">
                <button class="overButton"></button>
            </div>

        </div>
        <div class="myframe" id="myframeID" ng-init="inappbrowser()" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:-9999999999999999999999999999;">
           <!--<iframe src="http://unser-homberg.de/" id="frame_id" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>--> 

        </div>
    </div>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script src="scripts/angular/angular.min.js"></script>
    <script type="text/javascript">
    document.addEventListener('deviceready', function onDeviceReady() {
        angular.bootstrap(document, ['unserhomberg']);
    }, false);

    var unserhomberg = angular.module('unserhomberg', []);
    </script>
    <script type="text/javascript" src="scripts/index.js"></script>

unserhomberg.controller('unserhombergController', function unserhombergController($scope) {
$scope.doitwork = "yes it does";
$scope.getImage = [];

function getImageFromCamera() {
    console.log("called");
    navigator.camera.getPicture(onSuccessCam, onFailCam, {
        quality: 75,
        targetHeight: 300,
        destinationType: Camera.DestinationType.FILE_URI,
    });

    function onSuccessCam(imageData) {
        console.log(imageData);
       // $scope.getImage.push
    }

    function onFailCam(message) {
        console.log('Failed because: ' + message);
    };
}

$scope.inappbrowser = function () {
    cordova.InAppBrowser.open('http://unser-homberg.de/', '_blank', 'location=no');
}});

.myframe {
z-index:0;
overflow:hidden;

}

.container {

z-index: 999999999999999999;
    position:absolute;

top: 93%;
left: 92%;
height:50px;
width:50px;

}

按钮应该像这个示例一样，我使用的是iframe，而不是InAppBrowser-Plugin： Works with iFrame

Cordova InAppBrowser上的Div Overlay

0 个答案: