android webview与js交互(动态添加js)

来源：互联网发布：centos 安装中文包编辑：程序博客网时间：2024/05/22 22:10

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一些常用的监听事件

0 0