起个标题就够费劲的,需求是这样: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);
}