The interaction of WebView and HTML5

Recent Projects WebView and HTML5 do more interaction, because it is not very familiar, inevitably there will be some bugs. Now for these bugs to solve their own, do a collation. Facilitate the future study and reference.

I. onreceivedtitle in the WebView.

1. Background: My project is to load the URL through WebView, and then click the item in the URL, continue to load the URL. Different URLs with different headings, we want to click on the item, the URL title can be correctly displayed on the control (a URL will not appear the title of the B URL to take over, that is, the title dislocation phenomenon). The results found that in Google Mobile phone nexus, click to enter the time, the title is not misplaced. But when you click Back, you always get the last HTML5 title. Tested on Huawei's phone, the results were normal.

2. Analysis: First on the original effect chart:

Operation steps: Department homepage = = "Admission Notice."
Department homepage = = "health Information = =" information details.
Set the title in code to:

 Mwebview.setwebchromeclient (New Webchromeclient () {
            @Override public
            void Onreceivedtitle (WebView view, String title) {
                super.onreceivedtitle (view, title);
                Tv_toptitle.settext (title);
             

Enter the time, the title is normal, there is no dislocation. But when you click the Back button, you find that the title is misplaced and you always get the title of the last HTML5 when you return.
It was initially thought to be the cause of the cache, plus a line of code:

Mwebview.getsettings (). Setcachemode (Websettings.load_no_cache);

Or does not work, when debugging found that Google and Huawei differences are as follows: (in Onreceivedtitle and GoBack, respectively, print the title of the WebView)

Huawei Mobile Phone Print log:

Google mobile phone print log:

Comparison found: Huawei mobile phone in return, will call the Onreceivedtitle method again. And Google Mobile, after returning, will not be invoked. Causes the page title to stop on the previous HTML5 page.

3. Solution:
Customize a Webinfo class that takes the URL and title as a member variable:

  Class Webinfo implements Serializable {
        private String URL;
        Private String title;

        Public webinfo (string url, string title) {
            this.url = URL;
            this.title = title;
        }

        Public String GetUrl () {return
            URL;
        }

        public void SetUrl (String url) {
            this.url = URL;
        }

        Public String GetTitle () {return
            title;
        }

        public void Settitle (String title) {
            this.title = title;
        }
    }

The processing scheme in Onreceivedtitle is:

Mwebview.setwebchromeclient (New Webchromeclient () {
            @Override public
            void Onreceivedtitle (WebView view, String title) {
                super.onreceivedtitle (view, title);
                LOG.E ("HTML5", View.gettitle ());

                Tv_toptitle.settext (title);
                The title information is stored in the Weblist, the page returned with the
                if (!weblist.isempty ()) {
                    //Compare the last item URL is the same as the current page, do not add, the same does not add
                    if (! Weblist.get (Weblist.size ()-1). Url.equals (Mwebview.geturl ()) {
                        Webinfo info = new Webinfo (Mwebview.geturl (), title);
                        Weblist.add (info);
                    }
                else {
                    Webinfo info = new Webinfo (Mwebview.geturl (), title);
                    Weblist.add (info);
                }

            

At the time of return, the processing is as follows:

  @Override public
    void Onback (View v) {
        if (Mwebview.cangoback () && weblist.size () > 1) {
            Mwebview.goback ();
            Weblist.remove (Weblist.size ()-1);
            Tv_toptitle.settext (Weblist.get (Weblist.size ()-1). GetTitle ());
            LOG.E ("HTML5 return", Mwebview.gettitle ());
        } else{
            Finish ();
        }
    

It is verified that this solution can solve the problem of HTML5 return title, and it is normal on Huawei mobile phone and Google mobile phone.

two. WebView and JS interaction

Here is my most commonly used one interaction, such as: The following, you need to remove the value of Emptytip. Do the appropriate UI action, depending on whether this value is empty:

<body style= "Overflow-y:hidden;position:absolute;left:0em;right:0em;top:0em;bottom:0em;margin:0em" >

    <p class= "Emptytip" > Create announcements now </p>

    <div id= "wrapper" style= "Position:absolute;width:100%;height" : 100%;overflow:hidden ">

    </div>
<script>
$ (function () {

});
</script>
</body>

Set up WebView to support JavaScript first:

Mwebview.getsettings (). Setjavascriptenabled (True);

Execute JS Code:

@Override public
            void onpagefinished (webview view, String URL) {
                super.onpagefinished (view, URL);
                Hideloadingdialog ();     Wv_content_notice.loadurl ("Javascript:window.ys_control.getNoticeID" (Document.getelementsbyclassname (' Emptytip ') ) [0].innerhtml); ");
            }

Custom JS Interface:

private void Dealwithurl (String originalurl) {
        wv_content_notice.addjavascriptinterface (new Jsinteration (), Ys_ Control ");

    }


    public class Jsinteration {

        @JavascriptInterface public
        void Getnoticeid (String  results) {
            //No matter what the result is, All send messages out, in the handler of the unified Process message
            = new ();
            Message.obj = result;
            Message.what = Iresult.deal_title;
            Handler.sendmessage (message);
        }

    

Process message: Gets the content of the emptytip and processes it according to the content.

Case Iresult.deal_title:
                    String content = (string) msg.obj;
                    if (null!=content) {
                       log.e ("test", content);
                        Tv_right_fun_2.setvisibility (view.invisible);
                        Tv_right_fun_3.settext ("new");
                        Tv_right_fun_3.setonclicklistener (New View.onclicklistener () {
                            @Override public
                            void OnClick (View v) {
                                Intent Intent3 = new Intent (cdannounceactivity.this, cdnewannounceactivity.class);
                                Intent3.putextra ("Cdroomid", cloudroomid);
                                StartActivity (INTENT3);
                            }
                        );
                    Break

The above 2 points are a little experience accumulated while using WebView and HTML5 to interact. I think the biggest harvest is: when the whole is unfamiliar, it may be possible to print a number of important parameters in the method, such as URLs, through the observation of the discovery URL may be inspired.