WebView加载本地html、js文件常见问题及解决办法

声明：基于android studio平台，php语言搭建服务器

目录：

---

1、JavaScript脚本语言没有反应

2、alert没法弹出

3、html页面之间不能跳转

4、屏幕缩放没有达到预期效果

5、使用$.ajax（）跨域访问服务器的时候没反应

6、java跟JavaScript相互调用常见问题及解决办法

       一、Uncaught ReferenceError: functionName is not defined

       二、安全限制问题

1、JavaScript脚本语言没有反应

---

问题描述：
       webview加载本地html文件，html文件中经常包含不少js脚本代码，例如某个按钮的点击事件，可是js代码将不起做用；

解决办法：
       java代码在用webview加载html文件以前先对webview进行设置，让webview能够支持js代码：

WebSettings webSettings = webViMain.getSettings();
webSettings.setJavaScriptEnabled(true);

2、alert没法弹出

---

问题描述：
       webview加载本地html文件，html中的js文件包含alert弹出框代码，可是webview没法弹出alert；

解决办法：
       在java代码中添加下面这句：

webViMain.setWebChromeClient(new WebChromeClient() {});

3、html页面之间不能跳转

---

问题描述：
       webview加载本地html文件，想在html文件中实现跳转到另外一个html文件（代码以下），html代码自己没问题，文件路径也是对的，可是跳转失败，显示文件不存在或被删除...

window.location.href="my_life.html";

解决办法：
       之因此不能实现html文件之间的跳转是由于上面那句跳转界面的代码只能在浏览器中才能被支持，能够为webview设置以下代码，至关于赋予webview代理浏览器的功能：

webViMain.setWebViewClient(new WebViewClient() {});

4、屏幕缩放没有达到预期效果

---

问题描述：
       webview加载本地html文件，html文件中是支持缩放的（代码以下），可是在手机运行程序的时候不支持缩放页面；

<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes">

解决办法：
       手机不能缩放是由于虽然html已经支持缩放了，可是webview仍然须要进行设置，让其支持html页面进行缩放：

WebSettings webSettings = webViMain.getSettings();
webSettings.setUseWideViewPort(true);      //设置缩放后不会变形
webSettings.setBuiltInZoomControls(true);     //设置能够缩放

5、使用$.ajax（）跨域访问服务器的时候没反应

---

问题描述：
       webview加载本地html文件，html文件须要访问服务器（代码以下），代码自己没问题，可是访问失败，没有反应

$.ajax({
    url: "http://suqhhhh.imwork.net:57037/App&Php_Dmo/login.php",
    data: {
        username: $("#username").val(),
        password: $("#password").val(),
    },
    type: "POST",
    timeout: 36000,
    dataType: "text",
    success: function(data, textStatus) {
        if (data == "登陆成功") {
            window.location.href = "my_life.html"; //在原窗口加载新页面
            //window.open("my_life.html");                 //在新窗口加载新页面
        } else {
            alert(textStatus + ":" + data);
        }
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("error:" + textStatus);
    }
});

解决办法：
       这里访问服务器涉及到跨域访问，须要在服务器代码添加header，让外部代码能够进行跨域访问，不然得不到访问权限：

<?php
// 指定容许其余域名访问
header('Access-Control-Allow-Origin:*');

6、java跟JavaScript相互调用常见问题及解决办法

---

一、Uncaught ReferenceError: functionName is not defined

问题描述：
       webview加载本地html文件，程序运行不起来，报错：

Uncaught ReferenceError: functionName is not defined...

解决办法：
       问题出现缘由，网页的js代码没有加载完成，就调用了js方法。解决方法是在网页加载完成以后调用js方法：

webViMain.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //在这里执行你想调用的js函数
            }
        });

二、安全限制问题

问题描述：
       若是只在4.2版本以上的机器出问题，那么就是系统处于安全限制的问题了。Android文档这样说的：

Caution: If you’ve set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotation to any method that you want available your web page code (the method must also be public). If you do not provide the annotation, then the method will not accessible by your web page when running on Android 4.2 or higher.

       中文大意为：

警告：若是你的程序目标平台是17或者是更高，你必需要在暴露给网页可调用的方法（这个方法必须是公开的）加上@JavascriptInterface注释。若是你不这样作的话，在4.2以之后的平台上，网页没法访问到你的方法。

解决办法：

将targetSdkVersion设置成17或更高，引入@JavascriptInterface注释

待补充。。。