android webview 与 js 交互 (动态添加 js)，【好文推荐
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>
function funFromjs(){
document.getElementById("mydiv").innerHTML="获取 id 为 mydiv 的元素，并向其中添加文字！";
myObj.fun1FromAndroid("我的 myObj 回调");
}
<?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>
function funFromjs(){
myObj.fun1FromAndroid("第一个 js 回调");
}
需要读取 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();
}
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论