cordova InAppBrowser open remote page suport call

Question

I met a problem when trying to open a remote page in cordova.

I tried using the InAppBrowser plugin open remote page no call native method.

I checked the official documentation. InAppBrowser does not allow access to local methods, but I need to implement this functionality.

Can you help me get an insight of how can I do this or get an approach of it?

Answer 1

An emulation of the postMessage API has been added to cordova-plugin-inappbrowser for Android & iOS by this PR which enables you to post messages from the page loaded into the InappBrowser Webview back to the main Cordova Webview where your app is running. Using this would enable you to call "native methods" in your app from the page loaded into the InappBrowser.

This functionality is not yet in the latest release version on npm (v3.0.0) so you'll need to install the plugin directly off the Github master branch (v3.1.0-dev):

cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser

In your Cordova app code you'd add code to listen for messages from the InappBrowser, for example:

var inAppBrowserRef = cordova.InAppBrowser.open("http://www.mypage.com", "_blank");
inAppBrowserRef.addEventListener("message", function (params){
    if(params.data.action === "myNativeMethod"){
        // Call your native method
        myApp.myNativeMethod();
    }
});

Then in the webpage being loaded into the InappBrowser you'd send the message:

<button id="myButton">Press me</button>
<script type="text/javascript">
    document.getElementById("myButton").addEventListener("click", function(){
        var message = {action: "myNativeMethod"};
        webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify(message));
    }, false);
</script>

If you don't have direct control over the page being loaded into the InappBrowser, you could inject the code to send the message:

inAppBrowserRef.executeScript({ 
    code: '\
        document.getElementById("myButton").addEventListener("click", function(){\
            var message = {action: "myNativeMethod"};\
            webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify(message));\
        }, false);\
    '
});