1、本地html与本地html里的js交互
2、本地html与本地js交互
3、网络html与网络js交互
4、网络html与本地js交互
5、各个情况动态添加js
以上5点都可以用一种方式来模拟，在本篇中采用本地html与本地js交互 （包含动态添加js的操作）
6、拦截url请求(在webview加载完成以后，触发的请求url)
7、拦截url请求后返回自己封装的数据（基于第6点，加载完成后，触发一些请求数据的url时拦截并自己封装数据返回给webview）
注：6、7点将在下一篇博客介绍
webview能做什么？此段引用vanezkw 感谢作者
1）、webView可以利用html做界面布局，虽然目前还比较少人这么使用，不过我相信当一些客户端需要复杂的图文（图文都是动态生成）混排的时候它肯定是个不错的选择。
2）、直接显示网页，这功能当然也是它最基本的功能。
3）、和js交互。（如果你的js基础比java基础好的话那么采用这种方式做一些复杂的处理是个不错的选择）
一、本地html与本地js交互（本地html引用本地js）
注:此例为本地html与本地js交互，如想在本地html添加js，将js.js代码复制到html对应<script></script>标签内即可
首先在assets文件夹得有两个文件.html、.js
test.html
<body> <a href="http://www.baidu.com">js中调用本地方法</a> <script src="file:///android_asset/js.js"></script> <p></p> <div id="mydiv"> </div> </body>
js.js
function funFromjs(){
document.getElementById("mydiv").innerHTML="获取id为mydiv的元素，并向其中添加文字！";
myObj.fun1FromAndroid("我的myObj回调");
}
activity.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.yanqy.yqy_jsexample.MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UI触发webview中的js"
android:id="@+id/mButton"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<WebView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/mWebView"
android:layout_below="@+id/mButton"
android:layout_centerHorizontal="true" />
</RelativeLayout>
MainActivity.xml
package com.yanqy.yqy_jsexample;
import android.content.Context;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private WebView mWebView;
private Button mBtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mBtn = (Button) findViewById(R.id.mButton);
mWebView = (WebView) findViewById(R.id.mWebView);
//设置编码
mWebView.getSettings().setDefaultTextEncodingName("utf-8");
//支持js
mWebView.getSettings().setJavaScriptEnabled(true);
//设置背景颜色 透明
mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));
//设置本地调用对象及其接口
mWebView.addJavascriptInterface(new JavaScriptObject(this), "myObj");
//载入网页
mWebView.loadUrl("file:///android_asset/test.html");
//点击调用js中方法
mBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mWebView.loadUrl("javascript:funFromjs()");
}
});
}
final class JavaScriptObject {
private Context mContxt;
public JavaScriptObject(Context mContxt) {
this.mContxt = mContxt;
}
@JavascriptInterface //sdk17版本以上加上注解
public void funFromAndroid(String name) {
//在此可以通过js返回数据name进行操作
Toast.makeText(mContxt, "调用funFromAndroid:" + name, Toast.LENGTH_LONG).show();
}
}
}
二、本地html动态添加js
同上首先在assets文件夹有.html、.js文件
test.xml 将<script></script>标签与其内容删除
<body> <a href="http://www.baidu.com">js中调用本地方法</a> <p></p> <div id="helloweb"> </div> </body>
js.js 同第一点不变
function funFromjs(){
myObj.fun1FromAndroid("第一个js回调");
}
MainActivity.java
需要读取js并添加到webview中才能达到添加js的效果
读取js添加到String 类型中
//js文本
private String wholeJS = "";
<span style="white-space:pre"> </span>//获取js文本
InputStream mIs = null;
try {
mIs = getResources().getAssets().open("js.js");
if(mIs != null){
byte buff[] = new byte[1024];
ByteArrayOutputStream fromFile = new ByteArrayOutputStream();
FileOutputStream out = null;
do {
int numread = 0;
numread = mIs.read(buff);
if (numread <= 0) {
break;
}
fromFile.write(buff, 0, numread);
} while (true);
wholeJS = fromFile.toString();
}else{
Toast.makeText(MainActivity.this, "js加载失败", Toast.LENGTH_SHORT).show();
}
} catch (IOException e) {
e.printStackTrace();
}
webview添加读取的js
mWebView.loadUrl("javascript:" + wholeJS);
MainActivity完整代码
package com.yanqy.yqy_jsexample;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;
import java.io.ByteArrayOutputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
public class MainActivity extends AppCompatActivity {
private WebView mWebView;
private Button mBtn;
//js文本
private String wholeJS = "";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mBtn = (Button) findViewById(R.id.mButton);
mWebView = (WebView) findViewById(R.id.mWebView);
//设置编码
mWebView.getSettings().setDefaultTextEncodingName("utf-8");
//支持js
mWebView.getSettings().setJavaScriptEnabled(true);
//设置背景颜色 透明
mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));
//设置本地调用对象及其接口
mWebView.addJavascriptInterface(new JavaScriptObject(this), "myObj");
//载入网页
mWebView.loadUrl("file:///android_asset/test.html");
//点击调用js中方法
mBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//触发html中的js
mWebView.loadUrl("javascript:funFromjs()");
}
});
//获取js文本
InputStream mIs = null;
try {
mIs = getResources().getAssets().open("js.js");
if(mIs != null){
byte buff[] = new byte[1024];
ByteArrayOutputStream fromFile = new ByteArrayOutputStream();
FileOutputStream out = null;
do {
int numread = 0;
numread = mIs.read(buff);
if (numread <= 0) {
break;
}
fromFile.write(buff, 0, numread);
} while (true);
wholeJS = fromFile.toString();
}else{
Toast.makeText(MainActivity.this, "js加载失败", Toast.LENGTH_SHORT).show();
}
} catch (IOException e) {
e.printStackTrace();
}
//webview添加读取的js
mWebView.loadUrl("javascript:" + wholeJS);
}
final class JavaScriptObject {
private Context mContxt;
public JavaScriptObject(Context mContxt) {
this.mContxt = mContxt;
}
@JavascriptInterface //sdk17版本以上加上注解
public void funFromAndroid(String name) {
//在此可以通过js返回数据name进行操作
Toast.makeText(mContxt, "调用funFromAndroid:" + name, Toast.LENGTH_LONG).show();
}
}
}
activity_main.xml 同第一点不变
第6、7点将在下一篇博客介绍关于拦截 与 webview一些常用的监听事件
时间： 2024-10-13 22:25:27