How to return value from InAppBrowser to Ionic app

Issue

We are loading given URL in the inappbrowser from ionic app, which will load HTML form along with one hidden input field.

I am trying to get that hidden field value while tapping submit button using inappbrowser's executeScript method as follow:

  browser.executeScript({
      code:
        "var result; document.getElementById('BtnSubmit').addEventListener('click', function(){" +
        "result = document.getElementById('myInput').value;});",
    });

In result variable, input value is fetched but need to return that from executeScript into ionic app context.

Solution

You need to attach your response to message event of inappbrowser and then receive it on app side.

The below script is to send postmessage. It has particular format in which it gets passed. Need to create JSON object.

browser.executeScript({
code: "document.getElementById('customBackbtn').onclick = function() {\
var message = 'close';\
var messageObj = {message: message};\
var stringifiedMessageObj = JSON.stringify(messageObj);\
webkit.messageHandlers.cordova_iab.postMessage('stringifiedMessageObj');\
}"});

Then capture the post message from iab back in your app:

browser.on('message').subscribe((val)=>{
const postObject:any = val;

//Do whatever you want to with postObject response from inappbrowser

});

Answered By - Vishal Srivastava