您的位置：首页 > 移动开发 > Android开发

Android中WebView使用html，且实现android和JS的互相调用

2018-02-28 10:30 936 查看

本文原创，转载注明出处JUSTYiSheng

1、创建html文件

创建文件很简单，用基本的文本编辑器保存成.html格式即可

web.html文件如下
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">

function javaToJS(){
document.getElementById("content").innerHTML =
"<br\>JAVA调用了JS的无参函数";
}

function javaToJsWith(arg){


document.location=arg;
}
</script>
</head>
<body>
以下为html内容<br/>
<h1><div id="content">显示一条文本</div></h1>
<br/>
<input type="button" value="调用java代码，且无参" onclick="window.java.noParameterFunction()" /> <br/> <input type="button" value="调用java代码，且有参" onclick="window.java.parameterFunction('JS->android 有参成功')"/>
</body>
</html>分析：内容很简单，两个JS方法，供原生调用。两个按钮，调用原生的方法。分别对应有参调用、无参调用，看代码即可理解
2、创建安卓工程
创建一个最简单的安卓工程，一个活动，布局中有两个按钮和webview即可

MainActivity.javapackage com.example.zyy.androidtohtml;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

/**
* Created by zyy on 2018/2/27.
*/
public class MainActivity extends Activity {
private WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webview);
// 启用javascript
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient());
webView.setWebChromeClient(new WebChromeClient());
// 从assets目录下面的加载html
webView.loadUrl("file:///android_asset/web.html");
webView.addJavascriptInterface(MainActivity.this, "java");//name:android在网页里面可以用window.name.方法名调用java方法

//Button1按钮无参调用HTML js方法
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 无参数调用 JS的方法
webView.loadUrl("javascript:javaToJS()");

}
});
//Button2按钮有参调用HTML js方法
findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 传递参数调用JS的方法，点击后调用document.location=arg切换网页
webView.loadUrl("javascript:javaToJsWith(" + "'https://baike.so.com/doc/456230-483111.html'" + ")");
}
});

}

//由于安全原因 targetSdkVersion>=17需要加 @JavascriptInterface
//JS调用java，且无参
@JavascriptInterface
public void noParameterFunction() {

runOnUiThread(new Runnable() {
@Override
public void run() {
Button button = (Button) findViewById(R.id.button2);
button.setText("JS->android 无参成功");
}
});
}

//JS调用java，且传参
@JavascriptInterface
public void parameterFunction(final String parameter) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Button button = (Button) findViewById(R.id.button2);
button.setText(parameter);
}
});
}
}
对应的activity_main.xml布局文件<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="JUSTYiSheng的博客，转载注明出处\nAndroid"
/>
<Button
android:id="@+id/button"
android:layout_margin="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="调用JS"
android:background="@color/colorPrimaryDark"
android:textColor="#ffffff"
/>
<Button
android:id="@+id/button2"
android:layout_margin="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="调用有参JS"
android:background="@color/colorPrimaryDark"
android:textColor="#ffffff"
/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Html+JS"
android:layout_marginTop="8dp"
/>

<WebView

android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

</LinearLayout>3、将web.html放进assets文件下

4、demo运行情况
基本界面：

点击调用JS后：

点击调用有参JS后：

点击网页的两个按钮图就不贴了，效果是点击网页按钮后，原生按钮text会改变
5、注意事项
android中webView.addJavascriptInterface(MainActivity.this, "java"); 网页中

<input type="button"  value="调用java代码，且无参" onclick="window.java.noParameterFunction()" />
<br/>
<input type="button"  value="调用java代码，且有参" onclick="window.java.parameterFunction('JS->android 有参成功')"/>

android中“java”对应JS中的window.java调用原生方法，这两个地方一定要相同，不然调用失败
附demo下载地址：点击打开链接
如果对开发有些基础的，看文章完全足够，不用浪费积分下载，哈哈
转载请注明出处，如有疑问可以留言

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： android JS html android和js互掉

相关文章推荐

新的分享

章节导航