Добавить кнопку в Cordova в AppBrowser, чтобы скрыть его EDIT: и добавить изображение через Javascript в Inappbrowser

У меня есть внешняя ссылка на URL с картой в моем приложении Ionic-v1. В настоящее время у меня активирована кнопка закрытия в InAppBrowser, и я снова могу открыть URL из своего приложения. Тем не менее, положение на карте, конечно, не запоминается (оно просто открывает URL).

Так что я нашел в документации InAppBrowser.hide(), который действительно помог бы мне. Тем не менее, я не могу найти способ добавить этот метод в приложение. Какой лучший способ?

Измените текущую кнопку закрытия, чтобы она делала скрытие вместо закрытия (манипулирование файлом inappbrowser.java en inappbrowser.m для Android и iOS соответственно. Добавьте загрузочный javascript к загрузчику inappbrowser, сделайте здесь кнопку скрытия и просто деактивируйте кнопку закрытия или...? У кого-нибудь есть предложения / лучшие практики / примеры кода? Спасибо!

РЕДАКТИРОВАТЬ: я использовал решение @NickyTheWrench, но хотел, чтобы стиль кнопки в панель с логотипом справа (не кликабелен). Итак, я использовал в коде:

var menu = document.createElement('div'); 
menu.style = 'height:24px;width:100%;background-color:#fdce0c;font-
size:16px;text-align:left;top:0;left:0;position:fixed;'; 
document.body.appendChild(menu); 

var button = document.createElement('Button'); 
button.innerHTML = '≡';
button.style = 'height:24px;border:0px;font-size:16px;border-radius:0px;background-color:#fdce0c;';  
menu.appendChild(button);

var image = document.createElement('Img'); 
image.src = 'http://gerhard.technoleno.nl/VGD_transparent_20px.png';
image.style = 'right:0;position:fixed'
menu.appendChild(image);

Это работает в скрипке: https://jsfiddle.net/m06hv1yt/16/, но ionic cordova не может предоставить изображение (это делает его синим прямоугольником с вопросительным знаком. Когда я сохраняю изображение локально, возникает та же проблема. Как можно добавить изображение к этому куску Javascript?

РЕДАКТИРОВАТЬ 2: Ответ для РЕДАКТИРОВАТЬ: URL-адрес должен быть https, в противном случае он не найден ионной Cordova.

Источник

2 ответа

Решение

Да, это возможно с помощью addEventListener а также executeScript,

Посмотрите этот пример кода, где мы внедряем JavaScript, который сгенерирует кнопку "Скрыть карту" в верхней части страницы в браузере приложения. Когда эта кнопка нажата, она устанавливает новый элемент "скрытый" в localStorage со значением "да". Затем у нас есть цикл, который проверяет, является ли значение yes, и скрывает inappbrowser.

var ref = window.open('https://www.examplemap.com/', '_blank', 'transitionstyle=fliphorizontal,location=no,toolbarposition=top,closebuttoncaption=X');

// Once the InAppBrowser finishes loading
ref.addEventListener("loadstop", function() {

  // 1st Clear out 'hidden' in localStorage for subsequent opens.
  // 2nd Create the button
  ref.executeScript({
    code: "var key = 'hidden'; var keyval = 'yes'; localStorage.setItem('hidden',''); var button = document.createElement('Button'); button.innerHTML = 'Hide Map'; button.style = 'top:0;right:0;position:fixed;'; document.body.appendChild(button); button.setAttribute('onclick','localStorage.setItem(key,keyval);');"
  });

  // Start an interval
  var loop = setInterval(function() {

    // Execute JavaScript to check if 'hidden' is 'yes' in the
    // child browser's localStorage.
    ref.executeScript({
        code: "localStorage.getItem( 'hidden' )"
      },
      function(values) {
        var hidden = values[0];

        // If 'hidden' is equal to 'yes', clear the interval and hide the InAppBrowser.
        if (hidden === 'yes') {
          clearInterval(loop);
          ref.hide();
        }
      }
    );
  });
});

Также обратите внимание, что в некоторых сценариях функция скрытия не работает на iOS и говорит: "Попытка скрыть IAB, пока он уже скрыт". Если это произойдет, пожалуйста, проверьте решение здесь.

Надеюсь, это поможет:-)

Источник 
// On your Cordova js
StatusBar.hide();
var ref=window.open('http://www.foo.bar','_blank','zoom=no,location=no,toolbar=no');
ref.addEventListener("loadstop", function() {
    ref.executeScript({
        code: "localStorage.setItem('close','no');"
    });
    var loop = setInterval(function() {
        ref.executeScript({
            code: "try {localStorage.getItem('close');} catch (exception) {}"
        }, function(values) {
            if (values[0]=== 'yes') {
                clearInterval(loop);
                ref.hide();
            }
        });
    });
});
// On your external page
$("#exitbutton").on("click",function(e){
    window.localStorage.setItem('close','yes');
});
Источник
Другие вопросы по тегам