Question

我通过inappbrowser插件为Phonegap应用程序加载了一个网页。该应用程序显示了一个网站和一个网上商店，也都可以从网络上访问它们。我无法添加“返回应用程序”按钮（从PC访问该网站时没有意义）。因此，我希望在phonegap应用程序中使用自定义导航（我更喜欢引导），以便可以在多个不同的网站之间导航。

不幸的是，浏览器隐藏了导航。有没有办法在应用程序浏览器顶部显示应用程序html导航？

非常感谢！

添加绝对位置，z-index 999999和具有CSS的显示块无济于事

Answer 1

一种可能的方法是，通过在Cordova应用程序Webview中生成按钮，将按钮注入到您的网页中：

var inAppBrowserRef = cordova.InAppBrowser.open("http://www.mypage.com", "_blank");

inAppBrowserRef.addEventListener('loadstop', function(e) {
    inAppBrowserRef.executeScript({ 
        code: '\
            var body = document.querySelector("body");\
            var button = document.createElement("div");\
            button.innerHTML = "Return to app";\
            button.classList.add("close_button");\
            button.onclick = function() {\
                webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify({action: "closeIAB"}));\
            };\
            body.appendChild(button);\
        '
    });
});

然后，您将为单击按钮关闭发布者时添加的消息添加一个侦听器：

inAppBrowserRef.addEventListener("message", function (params){
    if(params.data.action === "closeIAB"){
        inAppBrowserRef.close();
    }
});

您还可以从Cordova应用程序中注入按钮的样式：

inAppBrowserRef.insertCSS({
    "code": "\
        .close_button {\
            position: fixed;\
            bottom: 0;\
            z-index: 500;\
            width: 100%;\
            background: white;\
            color: black;\
            padding: 10px;\
            font-size: 20px;\
        }"
});

或者，如果愿意，可以将按钮样式添加到网页中的CSS（如果在您的控制之下）。

类似地，如果您不喜欢动态创建按钮HTML的想法，则可以将其包含在网页中，但默认情况下将其隐藏，除非应用程序注入了特定的类：

inAppBrowserRef.addEventListener('loadstop', function(e) {
    inAppBrowserRef.executeScript({ 
        code: '\
            var body = document.querySelector("body");\
            body.classList.add("is_app");\
        '
    });
});

在您的网站CSS中：

body:not(.is_app) .close_button{
    display: none;
}

请注意，postMessage API（v3.0.0中尚未将cordova-plugin-inappbrowser添加到this PR Android和iOS的latest release version on npm的仿真中。），因此您需要直接从Github主分支（v3.1.0-dev）上安装插件：

cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser

Answer 2

我很久以前做了另一种方式。应用内浏览器使用附加的GET参数打开了一个网站，因此该网站知道它是在应用内打开的。然后在网站中，我生成了一个特殊按钮，其中href包含自定义方案和一些命令。（例如myapp：// close-browser）

然后，我将应用程序配置为使用常规应用程序方案配置来捕获自定义URL。在用javascript捕获命令后，我便使用它的API关闭了应用内浏览器。

在Inappbrowser Phonegap Webview应用程序顶部显示自定义导航

2 个答案: