Android在WebView中调用JavaScript函数

我试图调用一些javascript函数坐在运行在一个android webview内的html页面。下面的代码尝试做的很简单——从android应用程序，调用一个带有测试消息的javascript函数，该函数反过来调用一个java函数返回android应用程序，通过toast显示测试消息。

javascript函数如下所示:

function testEcho(message){
window.JSInterface.doEchoTest(message);
}

从WebView，我已经尝试调用javascript如下方式，运气不好:

myWebView.loadUrl("javascript:testEcho(Hello World!)");
mWebView.loadUrl("javascript:(function () { " + "testEcho(Hello World!);" + "})()");

我在WebView上启用了javascript

myWebView.getSettings().setJavaScriptEnabled(true);
// register class containing methods to be exposed to JavaScript
myWebView.addJavascriptInterface(myJSInterface, "JSInterface");

这里是Java类

public class JSInterface{


private WebView mAppView;
public JSInterface  (WebView appView) {
this.mAppView = appView;
}


public void doEchoTest(String echo){
Toast toast = Toast.makeText(mAppView.getContext(), echo, Toast.LENGTH_SHORT);
toast.show();
}
}

我花了很多时间在谷歌上搜索，看看我哪里做错了。我找到的所有示例都使用了这种方法。有人发现问题了吗?

有其他几个外部javascript文件被引用&在html中使用，他们会是问题吗?

331979 次浏览
小开

我发现了问题所在:testEcho()参数中缺少引号。我是这样接到工作电话的:

myWebView.loadUrl("javascript:testEcho('Hello World!')");
小开 
public void run(final String scriptSrc) {
webView.post(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:" + scriptSrc);
}
});
}
小开

是的，你有语法错误。如果你想在你的logcat中得到你的Javascript错误和打印语句，你必须在你的WebChromeClient中实现onConsoleMessage(ConsoleMessage cm)方法。它提供了完整的堆栈跟踪，如Web console(Inspect元素)。这是方法。

public boolean onConsoleMessage(ConsoleMessage cm)
{
Log.d("Message", cm.message() + " -- From line "
+ cm.lineNumber() + " of "
+ cm.sourceId() );
return true;
}

实现后，你会得到你的Javascript错误和打印语句(console.log)在你的日志猫。

小开

我创建了一个漂亮的包装器来调用JavaScript方法;它还显示JavaScript错误日志:

private void callJavaScript(String methodName, Object...params){
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("javascript:try{");
stringBuilder.append(methodName);
stringBuilder.append("(");
for (int i = 0; i < params.length; i++) {
Object param = params[i];
if(param instanceof String){
stringBuilder.append("'");
stringBuilder.append(param.toString().replace("'", "\\'"));
stringBuilder.append("'");
}
if(i < params.length - 1){
stringBuilder.append(",");
}
}
stringBuilder.append(")}catch(error){Android.onError(error.message);}");
webView.loadUrl(stringBuilder.toString());
}

你还需要加上这个:

private class WebViewInterface{


@JavascriptInterface
public void onError(String error){
throw new Error(error);
}
}

并添加这个接口到你的webview:

webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebViewInterface(), "AndroidErrorReporter");
小开

修改@Ilya_Gazman的答案

    private void callJavaScript(WebView view, String methodName, Object...params){
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("javascript:try{");
stringBuilder.append(methodName);
stringBuilder.append("(");
String separator = "";
for (Object param : params) {
stringBuilder.append(separator);
separator = ",";
if(param instanceof String){
stringBuilder.append("'");
}
stringBuilder.append(param.toString().replace("'", "\\'"));
if(param instanceof String){
stringBuilder.append("'");
}


}
stringBuilder.append(")}catch(error){console.error(error.message);}");
final String call = stringBuilder.toString();
Log.i(TAG, "callJavaScript: call="+call);




view.loadUrl(call);
}

将正确地创建JS调用。

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

注意，对象不会被正确地传递——但是您可以在作为参数传递之前对它们进行序列化。

我也改变了错误的去向，我已经将它转移到控制台日志，可以通过:

    webView.setWebChromeClient(new CustomWebChromeClient());

和客户端

class CustomWebChromeClient extends WebChromeClient {
private static final String TAG = "CustomWebChromeClient";


@Override
public boolean onConsoleMessage(ConsoleMessage cm) {
Log.d(TAG, String.format("%s @ %d: %s", cm.message(),
cm.lineNumber(), cm.sourceId()));
return true;
}
}
小开

从kitkat开始使用evaluateJavascript方法代替loadUrl来调用javascript函数，如下所示

    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
webView.evaluateJavascript("enable();", null);
} else {
webView.loadUrl("javascript:enable();");
}
小开

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">


<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>


</RelativeLayout>

MainActivity.java


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;


import com.bluapp.androidview.R;


public class WebViewActivity3 extends AppCompatActivity {
private WebView webView;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view3);
webView = (WebView) findViewById(R.id.webView);
webView.setWebViewClient(new WebViewClient());
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/webview1.html");




webView.setWebViewClient(new WebViewClient(){
public void onPageFinished(WebView view, String weburl){
webView.loadUrl("javascript:testEcho('Javascript function in webview')");
}
});
}
}

资产文件

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>WebView1</title>
<meta forua="true" http-equiv="Cache-Control" content="max-age=0"/>
</head>


<body style="background-color:#212121">
<script type="text/javascript">
function testEcho(p1){
document.write(p1);
}
</script>
</body>


</html>
小开
下面是一个从WebView上的资产加载js脚本的例子。
把脚本放到文件中有助于阅读 我在onPageFinished中加载脚本，因为我需要访问脚本中的一些DOM元素(能够访问它应该被加载，否则它将为空)。根据脚本的目的，我们可以更早地加载它

资产/ myjsfile.js

document.getElementById("abc").innerText = "def"
document.getElementById("abc").onclick = function() {
document.getElementById("abc").innerText = "abc"
}

WebViewActivity

webView.settings.javaScriptEnabled = true
webView.webViewClient = object : WebViewClient() {
   

override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)


val script = readTextFromAsset("myjsfile.js")
view.loadUrl("javascript: $script")
}
}


fun readTextFromAsset(context: Context, fileName: String): String {
return context.assets.open(fileName).bufferedReader().use { it.readText()
}

提交答案