android 与html交互java调js与js调java操作

时间:2024-07-04 16:04:08

1.首先在项目下建一个assets目录(右击app->New->Folder->Assets Flolder),直接放在项目根目录下和res目录同级别(把所html,js,图片,css等所有网页相关放在这个目录下)r

2.建一个test.html文件代码如下

<html>

<script>
function callJS(arg){
document.getElementById('replaceme').innerHTML=arg;
alert("arg="+arg);
} //Android后台java会来调用它
</script>
<body>
<a href="#" onclick="window.alert('AlertfromJavaScript')">
alert调用toast</a><br> <a href="#" onclick="window.android.callAndroid('HellofromBrowser')">
js调用java方法</a><br>
<a href="#" onclick="window.android.callAndroid222('HellofromBrowser2222','333')">
js调用java方法2</a>
<!--//js通过自己定义“android"接口来调用java类中的方法,"android"可以改成任意的,但必须和java中设置的接口名一致-->
<br />
<p id="replaceme">
</p>
<body>
</html>

3.layout文件如下

<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"
android:layout_below="@+id/btnUrlShow" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="java调用js方法"
android:id="@+id/bt4"
android:layout_below="@+id/bt3"
android:layout_alignLeft="@+id/bt3"
android:layout_alignStart="@+id/bt3" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="用来显示html调用的值"
android:id="@+id/textView5"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"/>

4.activity代码如下

public class WebViewActivity extends Activity  {
private Button sendRequest,bt4;
private TextView responseText,textView5; private final Handler handler=new Handler();//只有用handel才能修改android控件的值
private class AndroidBridge //这个类中提供各种js可调用的方法。
{
@JavascriptInterface
public void callAndroid(final String arg)
{
handler.post(new Runnable(){
public void run()
{
Log.d("ZW", "calAndroid("+arg+")");
textView5.setText(arg);
}
});
} @JavascriptInterface
public void callAndroid222(final String arg,final String arg2)
{
handler.post(new Runnable(){
public void run()
{
Log.d("zwzw", "callAndroid222("+arg+","+arg2+")");
textView5.setText(arg);
}
});
}
} @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view);
textView5=(TextView)findViewById(R.id.textView5); webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);//让web可以运行js
String url="file:///android_asset/test.html";
webView.loadUrl(url); webView.addJavascriptInterface(new AndroidBridge(), "android"); //将那个实例化的函数类设置为”android"的js接口这个。这里什么android名字前台js调用就用什么,比如这这里给名字为abc,html中调用就用onclick="window.abc.callAndroid(...." //覆盖重写html中js的alert方法,还可以覆盖重写别的方法,可以转到定义去查。。
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) { Log.d("ZW", "onJsAlert(" + view + "," + url + "," + message + "," + result + ")");
Toast.makeText(WebViewActivity.this, message, Toast.LENGTH_SHORT).show();
result.confirm();
return true;
} });//设置可以被java截获的js事件。 //点android控件调用js方法
     bt4=(Button)findViewById(R.id.bt4);
bt4.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Log.d("ZW", "onClick(" + v + ")");
webView.loadUrl("javascript:callJS('hello from android')"); //java调用js的函数
}
});
}
}