Using Cordova webview

0
votes

I wish to find out, for mobile developing using Cordova, is there a way to open a remote web app, and when a button is click in the remote web app, it execute a java script in Cordova environment?

For example, my mobile app opened up a web page hosted in the app server through web view, to ask the user to acknowledge he read and accept the license. The user need to click "Accept" or "Not Accept" on the web page.

If the user click "Accept", I hope to run a javascript that can bring up another page in the mobile app for the user to proceed to use the mobile app.

Is this possible?

Thanks!

1
javascriptcordova

1 Answers

3
votes

Firstly, it's not a good idea to have a mobile app that is totally reliant on a remote server in order to function properly: what if the user's internet connection cuts out or is intermittent? (that happens plenty where I live).

However, one solution would be use an iframe to load the remote webapp content and cross-frame messaging to communicate the outcome of the UI interactions with the remote webapp back to your Cordova app. You will have to appropriately whitelist your remote webapp URL.

Something like this:

Cordova app index.html

<html>
    <head>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript">
            function onDeviceReady(){
                window.addEventListener("message", onFrameMessage, false);
            }

            function onFrameMessage(event){
                var eventName = event.data[0];
                if(eventName === "terms_result"){
                    var accepted = event.data[1] == 1; // == will match 1 or "1"
                    if(accepted){
                        // Do something - e.g. change to homepage
                    }else{
                        // Do something else - e.g. display an error message
                    }
                }
            }

            document.addEventListener("deviceready", onDeviceReady);
        </script>
    </head>
    <body>
        <div data-role="page" id="terms">
            <iframe src="http://example.com/my/remote/webapp" style="border: 0; width: 100%; height: 100%"></iframe>
        </div>
        <div data-role="page" id="home">
            <!-- Your home page content -->
        </div>
    </body>
</html>

Remote webapp html

<html>
    <head>
        <script type="text/javascript">
            function accept(result){
                window.parent.postMessage(["terms_result", result], "*");
            }
        </script>
    </head>
    <body>
        <button onclick="accept(1)">Accept</button>
        <button onclick="accept(0)">Not Accept</button>
    </body>
</html>