WebView杂谈

本文主要讲解有关在WebVeiw中加载一段js代码片段到WebView中，这一段js代码是以字符串的格式出现，我们要做的就是将这一段字符串格式的js代码嵌入到页面中，并能正常显示。

那么问题来了：

1.如何实现将字符串嵌入到html页面？

2.这有什么卵用？

额，好吧，先来第一个问题：

在js中我们可以用js的方法innerHTML来实现在js中想html页面中插入想要的内容，这里我们只不过是在Java中插入内容到html页面中而已。WebView是可以通过loadUrl()方法来加载js代码的，所以我们可以通过加载js代码来向html页面中插入内容。

好，下面上砖头：

public class LoadServerPageUtil {

    /**
     * 加载js代码片段到页面
     * @param webView
     * @param script    js代码片段
     */
    public static void injectScriptFile (WebView webView, String script) {
        String encoded = Base64.encodeBase64String(script.getBytes());
        Log.e("encoded", encoded);
        webView.loadUrl("javascript:(function() {" +
                "var parent = document.getElementsByTagName(‘head‘).item(0);" +
                "var script = document.createElement(‘script‘);" +
                "script.type = ‘text/javascript‘;" +
                "script.charset = ‘utf-8‘;" +
                // Tell the browser to BASE64-decode the string into your script !!!
                "script.innerHTML = decodeURIComponent(escape(window.atob(‘" + encoded + "‘)));" +
                "parent.appendChild(script)" +
                "})()");
    }
}

上面显示的代码的作用就是将字符串格式的js代码作为html页面引用的js文件插入到html页面中，效果类似于：

<script type="text/javascript" charset="utf-8" src="**.js"/>

接下来我们就可以随意调用那一段js代码中的方法了。

调用这个工具类的时机要把握好。先来看看WebView的两个辅助类WebViewClient和WebChromeClient：

1.WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度
2.WebViewClient主要帮助WebView处理各种通知、请求事件的

这里要用的是WebViewClient辅助类。

/**
 * Created by harry on 15/8/18.
 *
 * 用于加载js代码段
 */
public class MyWebViewClient extends WebViewClient {

    private WebView webView;
    private String script;

    public MyWebViewClient(WebView webView, String script) {
        this.webView = webView;
        this.script = script;
    }

    /**
     * 在webview中点击超链接时，是调用系统浏览器显示还是在当前webview中显示
     *
     *
     * @param view
     * @param url
     * @return false表示在当前webview中显示，默认是用系统浏览器显示
     */
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return false;
    }

    /**
     * 当页面加载完后的操作
     * @param view
     * @param url
     */
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        LoadServerPageUtil.injectScriptFile(webView, script);
    }
}

onPageFinished()方法作用很大，例如如果你想要加载图片到html页面是，我们知道加载图片是个很慢的过程，期间会对用户体验造成一定的影响，我们可以将加载图片的操作放在页面加载完后，提高用户体验。

我们在onPageFinished()方法中加载js代码片段，注意：这里如果有与上述引用js文件中同名的方法会将其覆盖掉。

最后就是在Activity中使用它了：

public class MainActivity extends Activity {

    private WebView wvJs;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        wvJs = (WebView) findViewById(R.id.wv_js);
        wvJs.getSettings().setJavaScriptEnabled(true);
        wvJs.getSettings().setDefaultTextEncodingName("UTF-8");
        wvJs.setWebChromeClient(new WebChromeClient());

        String script = "alert(\"你好，世界！\");";

        wvJs.setWebViewClient(new MyWebViewClient(wvJs, script));
        wvJs.loadUrl("file:///android_asset/as.html");
    }

}

好了，问题1已经解答完毕，可能脑子有点不清楚，写的东西比较乱，各位请谅解。

接下来的第二个问题：

现如今，WebApp越来越受到大众的喜爱，它的优点明显：

1.跨平台，开发一款app最蛋疼的无异于要考虑到不同平台的问题，我们可以不考虑windows phone、黑莓等系统，但不能只考虑Android和iOS中的一种，因为这两个平台的用户数量都是极大的，所以用原生开发需要开发两款app，而且使用的开发语言有较大的差别，会导致成本提高。
2.可快速迭代版本

具体的可自己google，这里的第二个问题可以结合这一点，由于我们使用的H5开发界面以及js响应相关操作的，这样我们可以在不更新apk（目前只是只做Android，iOS的坑还没入门）的情况下更新我们的应用。这里只能向你们讲解一下思路，代码还没整，等整出啦之后，问问老大能不能贡献给各位。

客户端启动时，向服务端传一个版本号，与服务端的版本号比对，若不一致，则读取服务端的html和js文件成字符串，加密后传给客户端，客户端通过解析这些字符串为html语言和js代码在webview中显示。

大致的意思就是这样，具体操作还在摸索中，对这方面的解释可能有点low，请各位自行理gai。

最后奉上源码：

传送门

版权声明：本文为博主原创文章，未经博主允许不得转载。