Показать пользовательскую навигацию в верхней части приложения inappbrowser Phonegap для веб-просмотра - PullRequest
Новая
       15

Показать пользовательскую навигацию в верхней части приложения inappbrowser Phonegap для веб-просмотра

0 голосов
/ 12 июня 2019

Я загружаю веб-страницу через плагин inappbrowser для моего приложения Phonegap. Приложение показывает веб-сайт и интернет-магазин, которые также доступны из Интернета. Я не могу добавить кнопку «Вернуться в приложение» (это не имеет смысла при посещении сайта с ПК). Поэтому я хочу использовать пользовательскую навигацию (я предпочитаю начальную загрузку) в приложении phonegap, чтобы я мог перемещаться между несколькими веб-сайтами.

К сожалению, навигация скрыта в приложении. Есть ли способ показать html-навигацию приложения поверх inappbrowser?

Большое спасибо!

добавление абсолютной позиции, z-index 999999 и отображения блока с помощью css не помогло

Ответы [ 2 ]

0 голосов
/ 15 июня 2019

Я сделал это давным-давно другим способом. В браузере приложения открыт веб-сайт с дополнительным параметром GET, поэтому веб-сайт знает, что он открыт внутри приложения. Затем на веб-сайте я сгенерировал специальную кнопку с href, содержащей пользовательскую схему и некоторую команду. (Например, myapp: // закрыть браузер)

Затем я настроил приложение для захвата пользовательского URL с помощью обычной конфигурации схемы приложения. После того, как я записал команду в javascript, я закрыл браузер приложения, используя его API.

0 голосов
/ 12 июня 2019

Один из способов сделать это - вставить кнопку на веб-страницу, сгенерировав ее в приложении 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 , который был добавлен в cordova-plugin-inappbrowser для Android и iOS с помощью , этот PR еще не находится в последняя версия выпуска на npm (v3.0.0), поэтому вам необходимо установить плагин непосредственно из главной ветви Github (v3.1.0-dev): 

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