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註釋

待補充。。。