Tengo un enlace externo a una URL con un mapa en mi aplicación Ionic-v1. Actualmente tengo el botón de cierre en mi InAppBrowser activado y puedo abrir la URL nuevamente desde mi aplicación. Sin embargo, la posición en el mapa, por supuesto, no se recuerda (simplemente vuelve a abrir la URL).

Entonces encontré en los documentos el InAppBrowser.hide () que realmente me ayudaría. Sin embargo, tengo problemas para encontrar la manera de agregar este método en la aplicación. Cual es la mejor manera?

Cambie el botón de cierre actual para ocultarlo en lugar de cerrarlo (manipulando inappbrowser.java en inappbrowser.m para Android y iOS respectivamente. Agregue javascript al inappbrowser al cargar y haga aquí un botón de ocultar y simplemente desactive el botón de cierre. ¿Alguien tiene sugerencias / mejores prácticas / ejemplos de código? ¡Gracias!

EDITAR: Usé la solución de @NickyTheWrench, pero quería diseñar el botón en una barra con un logotipo a la derecha (no se puede hacer clic). Entonces usé en el código:

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);

Esto funciona en violín: https://jsfiddle.net/m06hv1yt/16/, pero ionic cordova no puede proporcionar la imagen (lo convierte en un cuadro azul con un signo de interrogación. Cuando guardo la imagen localmente, aparece el mismo problema. ¿Cómo puedo agregar una imagen a esta pieza de Javascript?

EDITAR 2: Respuesta para EDITAR: La url debe ser https, de lo contrario, ionic cordova no la encuentra.

1
CorneeldH 20 feb. 2018 a las 23:10

2 respuestas

La mejor respuesta

Sí, esto es posible usando addEventListener y executeScript.

Mira este ejemplo de código, donde estamos inyectando JavaScript que generará un botón "Ocultar mapa" en la parte superior de la página en el navegador inapp. Cuando se hace clic en este botón, se establecerá un nuevo elemento 'oculto' en localStorage con un valor de 'sí'. Luego tenemos un ciclo que verifica si el valor es sí y ocultará el navegador inapp.

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();
        }
      }
    );
  });
});

Además, tenga en cuenta que en algunos casos la función de ocultar no funciona en iOS y dirá "Intenté ocultar IAB mientras ya estaba oculto" . Si eso sucede, consulte la solución para eso aquí.

Espero que esto ayude :-)

1
NickyTheWrench 26 feb. 2018 a las 22:22
// 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');
});
0
Marcello Kad 16 may. 2018 a las 14:16