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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值