Android WebView JAVA 与 JS 相互调用

最新推荐文章于 2023-03-09 14:50:25 发布

homebei2

最新推荐文章于 2023-03-09 14:50:25 发布

阅读量624

点赞数

分类专栏： Android问题分析

本文链接：https://blog.csdn.net/homebei2/article/details/44403079

版权

Android问题分析专栏收录该内容

19 篇文章 0 订阅

订阅专栏

WebView 代码

package webview.test;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {

	private WebView contentWebView = null;
	private TextView msgView = null;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		contentWebView = (WebView) findViewById(R.id.webview);
		msgView = (TextView) findViewById(R.id.msg);
		// 启用javascript
		contentWebView.getSettings().setJavaScriptEnabled(true);
		// 从assets目录下面的加载html
		contentWebView.loadUrl("file:///android_asset/index.html");

		Button button = (Button) findViewById(R.id.button);
		button.setOnClickListener(btnClickListener);
		contentWebView.addJavascriptInterface(this, "java");
	}

	OnClickListener btnClickListener = new Button.OnClickListener() {
		public void onClick(View v) {
			// 无参数调用
			contentWebView.loadUrl("javascript:javacalljs()");
			// 传递参数调用
			contentWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");
		}
	};

	public void startFunction() {
		Toast.makeText(this, "js调用java", Toast.LENGTH_SHORT).show();
		runOnUiThread(new Runnable() {

			@Override
			public void run() {
				msgView.setText(msgView.getText() + "\njs调用java");

			}
		});
	}

	public void startFunction(final String str) {
		Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
		runOnUiThread(new Runnable() {

			@Override
			public void run() {
				msgView.setText(msgView.getText() + "\njs调用java传递参数：" + str);

			}
		});
	}
}

Html代码

<html>
<head>
<meta http-equiv="Content-Type"	content="text/html;charset=gb2312">
<script type="text/javascript">
function javacalljs(){
	 document.getElementById("content").innerHTML +=   
         "<br\>java调用js函数";
}

function javacalljswithargs(arg){
	 document.getElementById("content").innerHTML +=   
         ("<br\>"+arg);
}

</script>
</head>
<body>
this is my html <br/>
<a onClick="window.java.startFunction()">调用java代码</a><br/>
<a onClick="window.java.startFunction('Test')" >调用java代码并传递参数</a>
<br/>
<div id="content">Body</div>
</body>
</html>

AndroidManifest.xml 代码

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="webview.test"
      android:versionCode="1"
      android:versionName="1.0">


    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name="webview.test.MainActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
    
     <uses-permission  android:name="android.permission.INTERNET" />
</manifest>

WevView 调用 JS 方法

// 无参数调用
			contentWebView.loadUrl("javascript:javacalljs()");
			// 传递参数调用
			contentWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");

JS调用Java方法

<a onClick="window.java.startFunction()">调用java代码</a><br/>
<a onClick="window.java.startFunction('Test')" >调用java代码并传递参数</a>
<br/>

以上,结合参考网上教程，没有什么技术难度，那么问题来了，有时候js调用java时，会执行不到。

注意AndroidManifest.xml 中如果指定了target sdkversion 不作处理，会执行不到js

    <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="17" />

android要求当target sdkversion到17或者更高后，必须使用一个annotation @JavascriptInterface

大家以后在升级targetsdkversion的时候还是小心点。各种类似的坑非常多。

Caution: If you've set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterfaceannotation to any method that you want available to your JavaScript (the method must also be public). If you do not provide the annotation, the method is not accessible by your web page when running on Android 4.2 or higher.

解决方式一：

删掉mainfest.xml中targetsdkversion内容⊙﹏⊙b汗

解决二：

   <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="17" />

在js要运行的java方法前加上<span style="color: rgb(34, 34, 34); font-family: Roboto, sans-serif; font-size: 14px; line-height: 19px; background-color: rgb(249, 249, 249);"> </span><code>@JavascriptInterface</code>

import android.webkit.JavascriptInterface;

在js要寻星的java方法前加入 @JacascriptInteface 编译SDK必须大于4.2 才能找到 JacascriptInteface

package webview.test;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import android.webkit.JavascriptInterface;
@SuppressLint({ "SetJavaScriptEnabled"})
public class MainActivity extends Activity{

	private WebView contentWebView = null;
	private TextView msgView = null;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		contentWebView = (WebView) findViewById(R.id.webview);
		msgView = (TextView) findViewById(R.id.msg);
		// 启用javascript
		contentWebView.getSettings().setJavaScriptEnabled(true);
		// 从assets目录下面的加载html
		contentWebView.loadUrl("file:///android_asset/index.html");

		Button button = (Button) findViewById(R.id.button);
		button.setOnClickListener(btnClickListener);
		contentWebView.addJavascriptInterface(this, "java");
	}
	OnClickListener btnClickListener = new Button.OnClickListener() {
		public void onClick(View v) {
			// 无参数调用
			contentWebView.loadUrl("javascript:javacalljs()");
			// 传递参数调用
			contentWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");
		}
	};
	@JavascriptInterface
	public void startFunction() {
		Toast.makeText(this, "js调用java", Toast.LENGTH_SHORT).show();
		runOnUiThread(new Runnable() {

			@Override
			public void run() {
				msgView.setText(msgView.getText() + "\njs调用java");

			}
		});
	}
	@JavascriptInterface
	public void startFunction(final String str) {
		Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
		runOnUiThread(new Runnable() {

			@Override
			public void run() {
				msgView.setText(msgView.getText() + "\njs调用java传递参数：" + str);

			}
		});
	}
}

参考博客

http://blog.csdn.net/zhtsuc/article/details/16809513

http://blog.csdn.net/cappuccinolau/article/details/8262821

http://blog.csdn.net/roserose0002/article/details/17414759

http://www.igooda.cn/jzjl/20141212737.html

http://stackoverflow.com/questions/16353430/appview-addjavascriptinterface-does-not-work-on-api-17

homebei2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android WebView JAVA 与 JS 相互调用

WebView 代码package webview.test;import android.annotation.SuppressLint;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;
复制链接

扫一扫