How to establish communication between webview and html page in worklight?

Question

I'm working on making a browser as a hybrid app using worklight framework for Android. I implemented my address bar as an input element which received the user input and pass the arguments to the webview to load the page. However, I cannot figure out how to do the reverse: whenever the user click on a link in webview, I want the address bar to change to the new location.

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

Are you implementing a native page that is opened? If so, take a look at ChildBrowser, that basically does the same thing. It has a TextView being used as an address bar. You may decide to use it, or get the bits and pieces you want out of it. Regardless, I would image what you want to do something like this. By overriding the onLoadResource in the WebViewClient, you should be able to grab the url and change your TextBox.

In response to the comment below: inside your environment's main js file in the wlEnvInit() function:

function wlEnvInit(){
    wlCommonInit();
    // Environment initialization code goes here       

    document.onclick=manageLinks;
}

Then in this function get the url and set the text of your input element:

function manageLinks(event) {
    var link = event.target;

    //go up the family tree until we find the A tag 
    while (link && link.tagName != 'A') {
        link = link.parentNode;
    }

    if (link) {
        var url = link.href;
        console.log("url = " + url);

        //You can decide if you want to separate external or 
        //internal links, depending on your application
        var linkIsExternal = ((url.indexOf('http://') == 0) || (url.indexOf('https://') == 0));

        if (linkIsExternal) {
            myInput.setText(url);
            return false;
        }
    }

    return true;
}

Inside of your WebView, inside the plugin, intercept the URL like this:

  webview.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
                //use this area to set your input. Depending on how you
                //implemented your plugin, you may need to return this value
                //back to your main activity
                Toast.makeText(cordova.getActivity(), "Loading: " + url, Toast.LENGTH_LONG).show();
        }
   });

edited May 23 '17 at 12:15

Community

1
1

answered Jan 30 '13 at 12:57

Ralph Pina

761
7
16

No, it is not a native page. It is required that the address bar is an HTML element which pass the address to the web view to load. (The reason it is an is for recyclability for, say iPhone). I achieved that but don't know how to do the reverse. – Minh Pham Jan 31 '13 at 07:19
The links the users are clicking on, are they in your HTML files, or are they external webpages? If they are in your HTML page, inside the app, you could use an onclick listener and get the URL to then setText on the . See above. – Ralph Pina Feb 01 '13 at 19:12
The link is of external sites. – Minh Pham Feb 01 '13 at 19:24
So how are you loading the external html pages inside the app? Are you loading them inside a container in your WL app's HTML page? – Ralph Pina Feb 01 '13 at 19:27
I create a new plugin which call up the native webview. Whenever a linked is submitted, i run cordova.exec to call up the webview. – Minh Pham Feb 02 '13 at 00:16
1

Ok, so you are using a native page. You'll need to intercept the URL inside of your plugin. I really recommend using ChildBrowser. cordova.exec has been depricated. See above for some code. – Ralph Pina Feb 02 '13 at 02:33
How can I set my input inside onPageFinished? The manageLinks() function seems only able to catch any link outside WebView (ie the environment html page). – Minh Pham Feb 04 '13 at 03:50
I have solved my problem. Turns out that I can achieve communication via callback functions of cordova. Looking at ChildBrowser code was a tremendous help for me. – Minh Pham Feb 05 '13 at 08:17

score 0 · Answer 2 · answered Jan 30 '13 at 10:00

Have you try to get the url from the href of and assign to the input variable and do the get/post? I know that it is possible in SDK i figure it dont will be harder in a framework. You can store the hiperlinks in a array with a parser or something similar.

example pseudocode:

When_hiperlink_clicked:  //could be like a listener (search about it)
url = hiperlink.getURL("myHiperlink");
myinput.setText(url);
execute_input_bar_action();

Is difficult to figure out without code or something more, sorry.

I cannot do myInput.setText(url) as I do not have any reference to it. Is there a way in cordova to make a callback function? — Minh Pham, Jan 31 '13 at 07:21

How to establish communication between webview and html page in worklight?

2 Answers2