android webview原生与JS交互参数带换行符处理

起个标题就够费劲的，需求是这样：webview里面是自己写的本地html，原生调用js方法时传递字符串，js就把字符串加在html主div（id为editor）的后面，像这样：

RE.insertText = function(text) {
    $("#editor").append("<div style='white-space:pre-wrap'>" + text+ "</div>")
}

这里解释下pre-wrap：

pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行

到这里，原生传入的字符串如果中间带空格，是可以正常显示在html上的，

但问题来了：

如果字符串带有换行符（\r\n），调用js方法会直接报错：

Uncaught SyntaxError: Invalid or unexpected token

解决方法是：

原生对字符串进行Base64进行编码，js再对字符串进行解码，代码如下：

    public static String getBase64(String str) {
        String result = "";
        if (str != null) {
            result = new String(Base64.encode(
                    str.getBytes(StandardCharsets.UTF_8), Base64.NO_WRAP),
                    StandardCharsets.UTF_8);
        }
        return result;
    }

注意：必须用Base64.NO_WARP的参数，否则末尾还是会带换行符，等于白干了。

js中，引入一个base64编解码库：https://github.com/dankogai/js-base64

为什么用这个库不用window.atob就好呢，因为浏览器自带的atob解码的中文是乱码。。。

RE.insertText = function(text) {
    //必须通过base64编码方式传输，否则js无法接收原生带换行符的参数
    //base64编码库：https://github.com/dankogai/js-base64
    //pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行
    //参考：https://how2j.cn/k/css2/css2-text/241.html#step460
    var data = Base64.decode(text)
    $("#editor").append("<div style='white-space:pre-wrap'>" + data + "</div>")
}

RE是html导入的专门与原生交互的js文件当中的全局参数

 

补充：webview调用js方法：

    public void insertText(String text) {
        exec("javascript:RE.insertText('" + text + "');");
    }
    protected void exec(final String trigger) {
        evaluateJavascript(trigger, null);
    }