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

最新推荐文章于 2024-03-24 23:30:06 发布

Android翻山之路

最新推荐文章于 2024-03-24 23:30:06 发布

阅读量7.8k

点赞数

分类专栏： android笔记文章标签： android webview js交互

本文链接：https://blog.csdn.net/u012885461/article/details/51360808

版权

android笔记专栏收录该内容

55 篇文章 0 订阅

订阅专栏

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

Android翻山之路

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
5
评论
android webview与js交互(动态添加js)

1）、webView可以利用html做界面布局，虽然目前还比较少人这么使用，不过我相信当一些客户端需要复杂的图文（图文都是动态生成）混排的时候它肯定是个不错的选择。2）、直接显示网页，这功能当然也是它最基本的功能。3）、和js交互。（如果你的js基础比java基础好的话那么采用这种方式做一些复杂的处理是个不错的选择）
复制链接

扫一扫