Is it possible to add buttons and control its event to toolbar of inappbrowser using javascript...?

Question

I am developing a Hybrid App for iOS and Android using PhoneGap.Is it possible to add buttons and control its event to toolbar of inappbrowser using javascript.I know how to add it through ios native side but i cant use that process.I need to control the button event through a javascript method.

Answer 1

You have two options to do that. The first option is, obviously, to patch the native plugin code, and that's it. Here you can find an example made for iOS, you will have to do the same to your Android Java code and for every other platform you want to support.

Another option is to hide the native toolbar and inject HTML and CSS to create a new one when the page is loaded. Something like this:

// starting inappbrowser...
inAppWindow = window.open(URL_TO_LOAD, '_blank', 'location=no');
// Listen to the events, we need to know when the page is completely loaded
inAppWindow.addEventListener('loadstop', function () {
  code = CustomHeader.html();
  // Inject your JS code!
  inAppWindow.executeScript({
    code: code
  }, function () {
    console.log("injected (callback).");
  });
  // Inject CSS!
  inAppWindow.insertCSS({
    code: CustomHeader.css
  }, function () {
    console.log("CSS inserted!");
  });

And you will have obviously to define the CustomHeader object, something like this:

var CustomHeader = {
    css: '#customheader { your css here }',
    html: function() {
      var code = 'var div = document.createElement("div");\
      div.id = "customheader";\
      // Insert it just after the body tag
      if (document.body.firstChild){ document.body.insertBefore(div, document.body.firstChild); } \
      else { document.body.appendChild(div); }';
      return code;
}
};

I had experience with this problem. For my case, the second option was enough, not a critical task. Sometimes it takes a lot for the loadstop event to fire, and so you don't see the injected bar for >= 5 seconds. And you have to pay attention even on the CSS of the loaded page, because obviously you can affect the original CSS, or the original CSS can affect the style of your toolbar.