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

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

目录：

---

一、JavaScript脚本语言没有反应

二、alert无法弹出

三、html页面之间不能跳转

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

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

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

       1、Uncaught ReferenceError: functionName is not defined

       2、安全限制问题

一、JavaScript脚本语言没有反应

---

问题描述：

       webview加载本地html文件，html文件中常常包含很多js脚本代码，例如某个按钮的点击事件，但是js代码将不起作用；

解决办法：

       java代码在用webview加载html文件之前先对webview进行设置，让webview可以支持js代码：

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

二、alert无法弹出

---

问题描述：

       webview加载本地html文件，html中的js文件包含alert弹出框代码，但是webview无法弹出alert；

解决办法：

       在java代码中添加下面这句：

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

三、html页面之间不能跳转

---

问题描述：

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

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

解决办法：

       之所以不能实现html文件之间的跳转是因为上面那句跳转界面的代码只能在浏览器中才能被支持，可以为webview设置如下代码，相当于赋予webview代理浏览器的功能：

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

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

---

问题描述：

       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);     //设置可以缩放

五、使用$.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:*');

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

---

1、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函数
            }
        });

2、安全限制问题

问题描述：

       如果只在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注释

待补充。。。