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);
    }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值