android webview 显示h5出现{{xxx}}显示{{xxx}}问题
时间: 2023-11-23 11:30:04 浏览: 185
这是因为在Android WebView中,双花括号“{{}}”被视为模板语法,因此在显示H5页面时,双花括号会被解析成模板语法,导致显示错误。
解决方法:
1. 在H5页面中使用转义符“\{\{xxx\}\}”来代替“{{xxx}}”。
2. 在Android代码中设置WebView的模板语法为其他字符,例如“[[xxx]]”:
webView.loadDataWithBaseURL(null, htmlContent, "text/html", "UTF-8", null);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new Object() {
@JavascriptInterface
public String getTemplateSyntax() {
return "[[";
}
}, "android");
webView.loadUrl("javascript:(function() { window.templateSyntax = android.getTemplateSyntax(); })();");
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
view.loadUrl("javascript:(function() { var elements = document.getElementsByTagName('*'); for (var i = 0; i < elements.length; i++) { var element = elements[i]; if (element.innerHTML.indexOf('{{') != -1) { element.innerHTML = element.innerHTML.replace(/{{/g, window.templateSyntax); } } })();");
}
});
这样就可以在Android WebView中正确显示H5页面中的“{{xxx}}”了。
阅读全文