android-agent-web中js-bridge案例

简介: android-agent-web中js-bridge案例


我的悲伤还来不及出发,就已经到站下车。——《第七天》

代码仓库:

https://github.com/Justson/AgentWeb

主要代码JsbridgeWebFragment.java

package com.just.agentweb.sample.fragment;
import android.graphics.Bitmap;
import android.os.Build;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.widget.LinearLayout;
import com.github.lzyzsd.jsbridge.BridgeHandler;
import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.BridgeWebViewClient;
import com.github.lzyzsd.jsbridge.CallBackFunction;
import com.google.gson.Gson;
import com.just.agentweb.AgentWeb;
import com.just.agentweb.WebViewClient;
import androidx.annotation.Nullable;
/**
 * Created by cenxiaozhong on 2017/7/1.
 * source code  https://github.com/Justson/AgentWeb
 */
public class JsbridgeWebFragment extends AgentWebFragment {
  public static JsbridgeWebFragment getInstance(Bundle bundle) {
    JsbridgeWebFragment mJsbridgeWebFragment = new JsbridgeWebFragment();
    if (mJsbridgeWebFragment != null) {
      mJsbridgeWebFragment.setArguments(bundle);
    }
    return mJsbridgeWebFragment;
  }
  private BridgeWebView mBridgeWebView;
  @Override
  public String getUrl() {
    return super.getUrl();
  }
  @Override
  public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    mBridgeWebView = new BridgeWebView(getActivity());
    mAgentWeb = AgentWeb.with(this)
        .setAgentWebParent((ViewGroup) view, new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT))
        .useDefaultIndicator(-1, 2)
        .setAgentWebWebSettings(getSettings())
        .setWebChromeClient(mWebChromeClient)
        .setWebViewClient(getWebViewClient())
        .setWebView(mBridgeWebView)
        .setSecurityType(AgentWeb.SecurityType.STRICT_CHECK)
//                .setDownloadListener(mDownloadListener) 4.0.0 删除该API
        .createAgentWeb()//
        .ready()//
        .go(getUrl());
    initView(view);
    mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
      @Override
      public void handler(String data, CallBackFunction function) {
        function.onCallBack("submitFromWeb exe, response data 中文 from Java");
      }
    });
    User user = new User();
    Location location = new Location();
    location.address = "SDU";
    user.location = location;
    user.name = "Agentweb --> Jsbridge";
    mBridgeWebView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction() {
      @Override
      public void onCallBack(String data) {
        Log.i(TAG, "data:" + data);
      }
    });
    mBridgeWebView.send("hello");
  }
  private WebViewClient getWebViewClient() {
    return new WebViewClient() {
      BridgeWebViewClient mBridgeWebViewClient = new BridgeWebViewClient(mBridgeWebView);
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (mBridgeWebViewClient.shouldOverrideUrlLoading(view, url)) {
          return true;
        }
        return super.shouldOverrideUrlLoading(view, url);
      }
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
          if (mBridgeWebViewClient.shouldOverrideUrlLoading(view, request.getUrl().toString())) {
            return true;
          }
        }
        return super.shouldOverrideUrlLoading(view, request);
      }
      @Override
      public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
      }
      @Override
      public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        mBridgeWebViewClient.onPageFinished(view, url);
      }
    };
  }
  static class Location {
    String address;
  }
  static class User {
    String name;
    Location location;
    String testStr;
  }
}

然后是com/just/agentweb/sample/activity/CommonActivity.java:140代码:

/*JsBridge 演示*/
case FLAG_GUIDE_DICTIONARY_JSBRIDGE_SAMPLE:
  ft.add(R.id.container_framelayout, mAgentWebFragment = JsbridgeWebFragment.getInstance(mBundle = new Bundle()), JsbridgeWebFragment.class.getName());
  mBundle.putString(AgentWebFragment.URL_KEY, "file:///android_asset/jsbridge/demo.html");
  break;

还有对应的html

<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="content-type">
        <title>
            js调用java
        </title>
    </head>
    <body>
        <p>
            <xmp id="show">
            </xmp>
        </p>
        <p>
            <xmp id="init"></xmp>
        </p>
        <p>
            <input type="text" id="text1" value="用户名(username)" />
        </p>
        <p>
           <input type="text" id="text2" value="password" />
        </p>
        <p>
            <input type="button" id="enter" value="发消息给Native" onclick="testClick();"/>
        </p>
        <p>
          <input type="button" id="enter1" value="调用Native方法" onclick="testClick1();"/>
        </p>
        <p>
            <input type="button" id="enter2" value="显示html" onclick="testDiv();" />
        </p>
        <p>
            <input type="file" value="打开文件" />
        </p>
    </body>
    <script>
        function testDiv() {
            document.getElementById("show").innerHTML = document.getElementsByTagName("html")[0].innerHTML;
        }
        function testClick() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;
            //send message to native
            var data = {id: 1, content: "这是一个图片 <img src=\"a.png\"/> test\r\nhahaha"};
            window.WebViewJavascriptBridge.send(
                data
                , function(responseData) {
                    document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
                }
            );
        }
        function testClick1() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;
            //call native method
            window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb'
                , {'param': '中文测试'}
                , function(responseData) {
                    document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
                }
            );
        }
        function bridgeLog(logContent) {
            document.getElementById("show").innerHTML = logContent;
        }
        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }
        connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                console.log('Js got a message', message);
                var data = {
                    'Javascript Responds': '测试中文!'
                };
                console.log('Js responding with', data);
                responseCallback(data);
            });
            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                var responseData = "Javascript Says Right back aka!";
                responseCallback(responseData);
            });
        })
</script>
</html>

效果如下:


相关文章
|
16天前
|
JavaScript 前端开发 Serverless
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
34 2
|
6天前
|
JavaScript 前端开发 安全
怎样用Node.js搭建web服务器
本文探讨了如何使用Node.js构建高效的HTTP服务器。首先,介绍了HTTP常见请求方法,如GET、POST、PUT等。接着,展示了如何使用Node.js的`http`模块创建服务器,并根据请求方法进行不同处理,如判断GET和POST请求,以及获取GET请求参数和处理POST请求数据。最后,讨论了服务器代码的模块化管理,包括路由管理和业务逻辑拆分,以提升代码的维护性和扩展性。通过本文,读者可以掌握基础的Node.js服务器开发及模块化设计技巧。
|
18小时前
|
前端开发 JavaScript
杨老师课堂之JavaScript案例手动切换轮播图片
杨老师课堂之JavaScript案例手动切换轮播图片
8 2
|
18小时前
|
JavaScript 前端开发
杨老师课堂之JavaScript案例全选、全不选、及反选
杨老师课堂之JavaScript案例全选、全不选、及反选
6 1
|
3天前
|
JavaScript 应用服务中间件 Apache
Node.js Web 模块
Node.js Web 模块
10 2
|
9天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
30 3
|
9天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
16 2
|
15天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的安卓的微博客系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的安卓的微博客系统附带文章和源代码部署视频讲解等
23 2
|
15天前
|
存储 前端开发 JavaScript
[初学者必看]JavaScript 简单实际案例练习,锻炼代码逻辑思维
【6月更文挑战第2天】这是一个前端小项目合集,包括图片轮播器、动态列表、模态框、表单验证等14个项目,旨在帮助初学者提升编码技能和实战经验。每个项目提供关键提示,如使用HTML、CSS和JavaScript实现不同功能,如事件监听、动画效果和数据处理。通过这些项目,学习者可以锻炼前端基础并增强实际操作能力。
16 2
|
21天前
|
JavaScript Java 测试技术
基于springboot+vue.js的基于Web教师个人成果管理系统附带文章和源代码设计说明文档ppt
基于springboot+vue.js的基于Web教师个人成果管理系统附带文章和源代码设计说明文档ppt
25 7

热门文章

最新文章