JsBridge "Uncaught TypeError: Cannot call method 'callHandler' of undefined", source
h5和原生结合开发app越来越流行。其实就是webview 的js调用native的方法。也就是需要搭建一个桥。这样的桥早就有人搭建好了,那就是jsbridge。
git地址:
https://github.com/lzyzsd/JsBridge.git
其实很简单,那些添加依赖我就不说了。
两种情况:
1.js调用本地的方法:
webView.loadUrl("http://testopen.cebbank.com/LifePayment/wap/apph5/index.html?uid=111&token=65F34B3203D893AD96173918C80C45B3&telno=16578915632&type=0&canal=yaoyaoshenghuo1&version=1.0.0&macValue=1167DA1CDF6379B94914C8CB5099542C");
webView.registerHandler("wxpay", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
// Toast.makeText(MainActivity.this, data, Toast.LENGTH_SHORT).show();
Gson gson = new GsonBuilder()
// 2013-09-14 16:45:29
.setDateFormat("yyyy-MM-dd HH:mm:ss")
// .setDateFormat("yyyy-MM-dd'T'HH:mm:ssZ")
.create();
OrderModel ordermodel=gson.fromJson(data,OrderModel.class);
requestWXPay(MainActivity.this,ordermodel);
Log.i(TAG, "handler: "+ordermodel.getAppid());
Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
// function.onCallBack("submitFromWeb exe, response data 中文 from Java");
}
});
js里面这样写:
//call native method
window.WebViewJavascriptBridge.callHandler(
'wxpay'
//, {'param': '中文测试'}
, data.orderModel
, function(responseData) {
<!--document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData-->
}
);
- 本地给js发送消息, 调用网页的方法:
本地这样写;
webView.callHandler("payResult", state, new CallBackFunction() {
@Override
public void onCallBack(String data) {
// TODO Auto-generated method stub
// Log.i(TAG, "reponse data from js " + data);
}
});
js里面这样写:
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("payResult", function(data, responseCallback) {
alert(data);
document.getElementById("show").innerHTML = ("data from Java: = " + data);
var responseData = "Javascript Says Right back aka!";
responseCallback(responseData);
});
})
就是一句户,方法名称对的上就可以了。
我这里只是总结了一下,其他的基础东西,自己看githup.
使用jsbridge遇到ssl认证的网站,结果一片空白。也就是https开头的。比如银联支付的页面。那么一开始我就设置了一个处理的webview,
WebViewClient webviewclient=new WebViewClient(){
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
}
};
webView.setWebViewClient(webviewclient);
后来,这个webview可以访问银联这种ssl认证的参数,但是不能响应js的调用了。
一直报错:
"Uncaught TypeError: Cannot call method 'callHandler' of undefined", source
我就知道jsbridge肯定自己设置了一个自己的webviewlicent,查看源码库,找到了:
package coma.github.lzyzsd.jsbridge;
private void init() {
this.setVerticalScrollBarEnabled(false);
this.setHorizontalScrollBarEnabled(false);
this.getSettings().setJavaScriptEnabled(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
this.setWebViewClient(generateBridgeWebViewClient());
}
protected BridgeWebViewClient generateBridgeWebViewClient() {
return new BridgeWebViewClient(this);
}
这里,然后这个BridgeWebViewClient我们需要重写,让他支持ssl:
package coma.github.lzyzsd.jsbridge;
import android.graphics.Bitmap;
import android.net.http.SslError;
import android.webkit.SslErrorHandler;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
/**
* Created by bruce on 10/28/15.
*/
public class BridgeWebViewClient extends WebViewClient {
private BridgeWebView webView;
public BridgeWebViewClient(BridgeWebView webView) {
this.webView = webView;
}
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
}
ok,既可以使用js,也可以支持ssl。
JsBridge "Uncaught TypeError: Cannot call method 'callHandler' of undefined", source的更多相关文章
- “Uncaught TypeError: Cannot call method 'createChild' of undefined" 问题的解决
Uncaught TypeError: Cannot call method 'createChild' of undefined 我在使用Ext 4.1.1做grid.Panel,然后chrome爆 ...
- bootstrap datepicker Uncaught TypeError: Cannot call method 'split' of undefined问题
这个问题主要是由于date对象不是字符串,不能使用 split 函数,简单处理一下,转换成字符串就可以解决问题: ++++++++++++++++++++++++ parseDate: functio ...
- SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序
SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 异常汇总:http://www ...
- Uncaught TypeError: Cannot read property 'msie' of undefined
因为图方便,抄了别人写的一个jquerry插件,运行时“var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ...
- easyui使用时出现这个Uncaught TypeError: Cannot read property 'combo' of undefined
easyui使用时出现这个Uncaught TypeError: Cannot read property 'nodeName' of undefined 最后检查发现是必须给select一个id,光 ...
- reactjs Uncaught TypeError: Cannot read property 'location' of undefined
reactjs Uncaught TypeError: Cannot read property 'location' of undefined reactjs 路由配置 怎么跳转 不成功 国内搜索引 ...
- index.js:13 Uncaught TypeError: Cannot read property 'split' of undefined
使用 webpack 编译 Vue 项目时出现报错: index.js:13 Uncaught TypeError: Cannot read property 'split' of undefined ...
- Uncaught TypeError: Cannot read property ‘split’ of undefined
问题 :Uncaught TypeError: Cannot read property ‘split’ of undefinedat HTMLLIElement. split()切割的问题 因为遍历 ...
- DataTable插件报错:Uncaught TypeError: Cannot read property 'style' of undefined
DataTable插件报错:Uncaught TypeError: Cannot read property 'style' of undefined 原因:table 中定义的列和aoColumns ...
随机推荐
- check_mk插件 redis
/usr/lib/check_mk_agent/plugins/mk_redis #!/bin/bash echo '<<<redis>>>' hosts=$(ne ...
- System Center Configuration Manager 2016 配置安装篇(Part1)
SCCM 2016 配置管理系列(Part 1- 4) 介绍AD01上配置了Active Directory域服务(ADDS),然后将Configuration Manager服务器(CM16)加入到 ...
- Java线程堆栈分析
不知觉间工作已有一年了,闲下来的时候总会思考下,作为一名Java程序员,不能一直停留在开发业务使用框架上面.老话说得好,机会是留给有准备的人的,因此,开始计划看一些Java底层一点的东西,尝试开始在学 ...
- eclipse中Tomcat启动了 但看不到tomcat首页
症状: tomcat在eclipse里面能正常启动,而在浏览器中访问http://localhost:8080/不能访问,且报404错误.同时其他项目页面也不能访问. 关闭eclipse里面的tomc ...
- 4 - 函数&装饰器 and 迭代器&生成器
函数是什么 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的.程序里函数的定义是: 定义:将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 ...
- class类重定义
C++项目中如果一个头文件被多个文件包含,#include"xxx.h",将可能导致头文件里面定义的类被多次编译,解决方法是加编译指示: #pragma once //告诉编译器只 ...
- git/github初级运用自如(转自:虫师)
注:本文来源于 虫师博客(http://www.cnblogs.com/fnng/archive/2012/01/07/2315685.html) ,内容详尽,真实有用. 另:发一个github使用教 ...
- Selenium入门12 鼠标和键盘事件
1 鼠标 集成在webdriver.ActionChains.单击.双击.右击.拖放等等. 2 键盘 引入包from selenium.webdriver.common.keys import K ...
- yum 源搭建
RHEL系统部署网络yum源 配置网络yum源 RHEL系统本身光盘做成的yum源所提供的软件包有限,在实际使用过程中经常会出现缺包的现象,本文中以CentOS源作为替代,CentOS的软件包和RHE ...
- EF分组后把查询的字段具体映射到指定类里面的写法
//先做基本查询 var querySql = from l in _logClinicDataOperationRepository.Table select new LogClinicDataOp ...