Android WebView使用笔记(二) JS注入

标签: Android WebView JS
15人阅读 评论(0) 收藏 举报
分类:

使用场景:

  在一个第三方的web页面,如果想在页面后面拼加内容(如资讯文章需要拼加广告),如果使用WebView后面加上Android 的Native View的方式,可能会有页面卡顿或者其他问题,比如滑动问题等。

  这时,其实还可以使用注入JS的方式,直接在页面的body后面加入H5形式的内容页面

效果如图:

   WebView中加载百度首页,点击“加载JS”后注入我们写好的JS,会在页面底部添加一行文字“这个是添加的内容”;

   点击调用JS会调用我们注入的JS方法,然后Alert一个信息。

     


   注入的JS:

      

javascript:{
 $("body").append("<div style='position:fixed; bottom:15px'><b>这个是添加的内容</b></div>");

 function myJsFunction(data) {
  alert("myJsFunction:" + data);
  }

}

  可以看到代码很简单,只是在页面的body后追加了一段h5代码,

  声明了一个JS函数:myJsFunction


  布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:paddingBottom="15dp"
    tools:context="com.muzi.js.MainActivity">

    <Button
        android:id="@+id/btn_load_js"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="加载js" />

    <Button
        android:id="@+id/btn_call_js"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="调用js" />

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>


package com.muzi.js;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Locale;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private static final String URL = "https://www.baidu.com";

    private Button mBtnLoadJs;
    private Button mBtnCallJs;
    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.web_view);
        mBtnLoadJs = (Button) findViewById(R.id.btn_load_js);
        mBtnCallJs = (Button) findViewById(R.id.btn_call_js);

        mBtnLoadJs.setOnClickListener(this);
        mBtnCallJs.setOnClickListener(this);

        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message,
                                     JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }
        });

        mWebView.loadUrl(URL);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_call_js:
                mWebView.evaluateJavascript(String.format(Locale.getDefault(), "javascript:myJsFunction(%s)", "\"hello\""), null);
                break;
            case R.id.btn_load_js:
                String js = readAssertFile(getApplicationContext(), "myJs"); //io操作需要放到子线程,这里是非正当操作
                mWebView.evaluateJavascript(js, null);
                break;
        }
    }

    public static String readAssertFile(Context context, String file) {
        String s = null;
        InputStream inputStream = null;
        try {
            inputStream = context.getAssets().open(file);
            s = readTextFromStream(inputStream);
        } catch (IOException e) {
            Log.w("tag", e.getMessage());
        } finally {
            if (inputStream != null) {
                try {
                    inputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        return s;
    }

    public static String readTextFromStream(InputStream inputStream) {
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        byte buf[] = new byte[1024];
        int len;
        try {
            while ((len = inputStream.read(buf)) != -1) {
                outputStream.write(buf, 0, len);
            }
            outputStream.close();
            inputStream.close();
        } catch (IOException e) {
        }
        return outputStream.toString();
    }
}


查看评论

Android webview 注入JS

群友提出一个问题,webview load 一个页面,页面如图所示 要求是点击“高速下载”后,回调android的方法(我才可能要传参数给android)package com.example....
  • moyinghui
  • moyinghui
  • 2017-06-06 19:18:57
  • 490

Android端使用WebView注入一段js代码实现js调用android

需求:为网页上个链接增加点击事件,但是这个链接无法增加js代码 url:http://public.rongcloud.cn/view/D4F444BE2D94D760329F3CF38B4AE35C...
  • u011404611
  • u011404611
  • 2017-01-09 15:23:58
  • 6135

Android中向webview注入js代码

Android中向webview注入js代码可以通过webview.loadUrl("javascript:xxx")来实现,然后就会执行javascript后面的代码。 但是当需要注入一整个j...
  • f917386389
  • f917386389
  • 2015-12-03 22:48:55
  • 4364

webview注入js方法

Android中向webview注入js代码可以通过webview.loadUrl("javascript:xxx")来实现,然后就会执行javascript后面的代码。 但是当需要注入一整个j...
  • ecjtuhq
  • ecjtuhq
  • 2017-04-21 22:49:33
  • 933

android webview 注入jquery

https://bbs.exmobi.cn/thread-4094-1-1.html http://gundumw100.iteye.com/blog/1545714
  • xiayu98020214
  • xiayu98020214
  • 2018-01-12 10:36:10
  • 86

Android WebView的两点技巧-资源拦截与js注入

1.前言WebView是个很常用的控件,但是缺不是那么简单,那么,今天来给大家介绍下最近在做的时候,遇见的几个问题。注意,并不是所有的情况下,webview加载的都是自适应的网页。比如说,加载 。2....
  • qq_21430549
  • qq_21430549
  • 2016-10-02 23:21:03
  • 3375

Android WebView的Js对象注入漏洞解决方案

Android webview注入JS对象引发的安全漏洞,恶意的JS脚本可以读取到SDcard上面的任何文件,本文给出了这种漏洞的一种解决方案。...
  • leehong2005
  • leehong2005
  • 2013-09-30 11:01:16
  • 69629

WebView Js注入

注入前: 注入后: 主界面: package com.example.webviewjsdemo; import android.os.Bundle; import android.ap...
  • wyl530274554
  • wyl530274554
  • 2014-12-27 16:53:41
  • 6222

Android 防止webview 注入

现在android 4.2以上的版本,反正注入很简单,js交互函数加上@JavascriptInterface就ok,那低版本呢?其实很简单别把它想的很难。 说白了总体思路是:在网页没加载完前,注入...
  • JimTrency
  • JimTrency
  • 2017-06-26 19:30:08
  • 461

Webview动态注入js脚本

在webview加载完成后,给所有的img便签加上本地点击事件     /** 要注入的js代码 function(){ var objs = document.getElementsByTagN...
  • b87936260
  • b87936260
  • 2015-05-12 10:14:39
  • 5388
    个人资料
    等级:
    访问量: 5882
    积分: 206
    排名: 36万+
    文章分类
    最新评论