码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-05-12 11:38:10      阅读:233      评论:0      收藏: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 webview与js交互(动态添加js)

标签:

原文地址:http://blog.csdn.net/u012885461/article/details/51360808

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!