在 inappbrowser Phonegap webview 应用程序顶部显示自定义导航

Question

我通过我的 Phonegap 应用程序的 inappbrowser 插件加载了一个网页。该应用程序显示了一个网站和一个网上商店，它们都可以从网络上访问。我无法添加按钮 'go back to app'（这在从 PC 访问网站时没有意义）。所以我想在 phonegap 应用程序中使用自定义导航（我更喜欢 bootstrap），这样我就可以在多个不同的网站之间导航。

不幸的是，导航被 inappbrowser 隐藏了。有没有办法在 inappbrowser 顶部显示应用 html 导航？

非常感谢！

使用 css 添加绝对位置、z-index 999999 和显示块没有帮助

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);\
        '
    });
});

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

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 的想法，您可以将其作为网页的一部分包含在内，但默认情况下将其隐藏，除非注入特定的 class通过应用：

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 that has been added to cordova-plugin-inappbrowser for Android & iOS by this PR is not yet in the latest release version on npm (v3.0.0) 的仿真，因此您需要直接从 Github master 分支 (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 应用程序顶部显示自定义导航

Show custom navigation on top of inappbrowser Phonegap webview app

html

android

ios

cordova

phonegap