Add button in cordova inappbrowser to hide it EDIT: and add image via Javascript to inappbrowser

Question

I have an external link to an url with a map in my Ionic-v1 app. Currently I have the close-button in my InAppBrowser activated and I can open the URL again from my app. However, the position on the map is of course not remembered (it just reopens the url).

So I found in the docs the InAppBrowser.hide() which would really help me. However, I have trouble finding a way to add this method in the app. What’s the best way?

Change the current close button to do hide instead of close (so manipulating the inappbrowser.java en inappbrowser.m for Android en iOS respectively Add javascript to the inappbrowser on load and make here a hide button and just deactivate the close-button Or…? Does anyone have suggestions / best practices / code examples? Thanks!

EDIT: I used the solution of @NickyTheWrench, but wanted to style the button into a bar with at the right a logo (not clickable). So I used in code:

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

This works in fiddle: https://jsfiddle.net/m06hv1yt/16/, but ionic cordova is unable to provide the image (it makes it a blue box with a question mark. When I save image locally the same problem is there. How can add an image to this piece of Javascript?

EDIT 2: Answer for EDIT: The url must be https, otherwise it is not found by ionic cordova.

Answer 1

Yes this is possible using addEventListener and executeScript.

Check out this code sample, where we are injecting JavaScript that will generate a "Hide Map" button on top of the page in the inappbrowser. When this button is clicked, it will set a new item 'hidden' in localStorage with a value of 'yes'. Then we have a loop that checks if the value is yes, and will hide the 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();
        }
      }
    );
  });
});

Also, please note that in some scenarios the hide function does not work on iOS and will say "Tried to hide IAB while already hidden". If that happens, please check out the solution for that here.

I hope this helps :-)