Modern cross-platform JavaScript bridge, through which you can invoke each other's functions synchronously or asynchronously between JavaScript and native applications.
Chinese documentation 中文文档
DSBridge-Android:https://github.com/wendux/DSBridge-Android
DSBridge v3.0 is a milestone version. Compared with v2.0, we have made a lot of changes. Note that v3.0 is incompatible with v2.0, but v2.0 will continue to maintain. If you are a new user, use >=v3.0.
The three ends of Android, IOS and Javascript are easy to use, light and powerful, safe and strong
Both synchronous and asynchronous calls are supported
Support API Object, which centrally implements APIs in a Java Class or a Javascript object
Support API namespace
Support debug mode
Support the test of whether API exists
Support Progress Callback: one call, multiple returns
Support event listener for Javascript to close the page
Support Modal and Modeless popup box for javascript
Support the X5 webcore of Tencent for Android
pod "dsBridge"
See the dsbridgedemo/
package. run the app
project and to see it in action.
To use a dsBridge in your own project:
Implement APIs in a class
@implementation JsApiTest
//for synchronous invocation
- (NSString *) testSyn:(NSString *) msg
{
return [msg stringByAppendingString:@"[ syn call]"];
}
//for asynchronous invocation
- (void) testAsyn:(NSString *) msg :(void (^)(NSString * _Nullable result,BOOL complete))completionHandler
{
completionHandler([msg stringByAppendingString:@" [ asyn call]"],YES);
}
@end
add API object to DWKWebView
DWKWebView * dwebview=[[DWKWebView alloc] initWithFrame:bounds];
// register api object without namespace
[dwebview addJavascriptObject:[[JsApiTest alloc] init] namespace:nil];
Call Native (Java/Object-c/swift) API in Javascript, and register javascript API 。
Init dsBridge
//cdn
//<script src="https://unpkg.com/dsbridge@3.0.7/dist/dsbridge.js"> </script>
//npm
//npm install dsbridge@3.0.7
var dsBridge=require("dsbridge")
Call Native API and register a javascript API for Native invocation
//Call synchronously
var str=dsBridge.call("testSyn","testSyn");
//Call asynchronously
dsBridge.call("testAsyn","testAsyn", function (v) {
alert(v);
})
//Register javascript API for Native
dsBridge.register('addValue',function(l,r){
return l+r;
})
Call Javascript API in Object-C
[dwebview callHandler:@"addValue" arguments:@[@3,@4] completionHandler:^(NSNumber* value){
NSLog(@"%@",value);
}];
In order to be compatible with IOS , we make the following convention on Object-C API signature:
For synchronous API.
(id) handler:(id) msg
The argument type can be any class type, but the type of return value can't be void.
For asynchronous API.
(void) handler(id arg, (void (^)( id result,BOOL complete))completionHandler)
Namespaces can help you better manage your APIs, which is very useful in hybrid applications, because these applications have a large number of APIs. DSBridge (>= v3.0.0) allows you to classify API with namespace. And the namespace can be multilevel, between different levels with '.' division.
In debug mode, some errors will be prompted by a popup dialog , and the exception caused by the native APIs will not be captured to expose problems. We recommend that the debug mode be opened at the development stage. You can open debug mode :
// open debug mode
[dwebview setDebugMode:true];
Normally, when a API is called to end, it returns a result, which corresponds one by one. But sometimes a call need to repeatedly return multipule times, Suppose that on the Native side, there is a API to download the file, in the process of downloading, it will send the progress information to Javascript many times, then Javascript will display the progress information on the H5 page. Oh...You will find it is difficult to achieve this function. Fortunately, DSBridge supports Progress Callback. You can be very simple and convenient to implement a call that needs to be returned many times. Here's an example of a countdown:
In Object-c
- ( void )callProgress:(NSDictionary *) args :(void (^)(NSNumber * _Nullable result,BOOL complete))completionHandler
{
value=10;
hanlder=completionHandler;
timer = [NSTimer scheduledTimerWithTimeInterval:1.0
target:self
selector:@selector(onTimer:)
userInfo:nil
repeats:YES];
}
-(void)onTimer:t{
if(value!=-1){
hanlder([NSNumber numberWithInt:value--],NO);
}else{
hanlder(@"",YES);
[timer invalidate];
}
}
In Javascript
dsBridge.call("callProgress", function (value) {
document.getElementById("progress").innerText = value
})
For the complete sample code, please refer to the demo project.
For Javascript popup box functions (alert/confirm/prompt), DSBridge has implemented them all by default. the default dialog label text language is Chinese, you can custom the text by calling customJavascriptDialogLabelTitles
. If you still want to implement them by yourself , set the DSUIDelegate
property which is a proxy of WKUIDelegate
.
Note That the default dialog box implemented by DSBridge is modal. This will block the UI thread. If you need modeless, please refer to disableJavascriptDialogBlock
.
In DWKWebView
, please use DSUIDelegate
instead of UIDelegate
, because UIDelegate
has already been set inner DWKWebView
, DSUIDelegate
is a proxy of UIDelegate
.
In Object-c, the object that implements the javascript interfaces is called Object-c API object.
addJavascriptObject:(id) object namespace:(NSString *) namespace
Add the Object-c API object with supplied namespace into DWKWebView. The javascript can then call OC APIs with bridge.call("namespace.api",...)
.
If the namespace is empty, the Object-c API object have no namespace. The javascript can call OC APIs with bridge.call("api",...)
.
Example:
In Object-c
@implementation JsEchoApi
- (id) syn:(id) arg
{
return arg;
}
- (void) asyn: (id) arg :(void (^)( id _Nullable result,BOOL complete))completionHandler
{
completionHandler(arg,YES);
}
@end
// register api object with namespace "echo"
[dwebview addJavascriptObject:[[JsEchoApi alloc] init] namespace:@"echo"];
In Javascript
// call echo.syn
var ret=dsBridge.call("echo.syn",{msg:" I am echoSyn call", tag:1})
alert(JSON.stringify(ret))
// call echo.asyn
dsBridge.call("echo.asyn",{msg:" I am echoAsyn call",tag:2},function (ret) {
alert(JSON.stringify(ret));
})
removeJavascriptObject:(NSString *) namespace
Remove the Object-c API object with supplied namespace.
callHandler:(NSString *) methodName arguments:(NSArray *) args
callHandler:(NSString *) methodName completionHandler:(void (^)(id value))completionHandler
callHandler:(NSString *) methodName arguments:(NSArray *) args completionHandler:(void (^ )(id value))completionHandler
Call the javascript API. If a completionHandler
is given, the javascript handler can respond. the methodName
can contain the namespace. The completionHandler will be called in main thread.
Example:
[dwebview callHandler:@"append" arguments:@[@"I",@"love",@"you"]
completionHandler:^(NSString * _Nullable value) {
NSLog(@"call succeed, append string is: %@",value);
}];
// call with namespace 'syn', More details to see the Demo project
[dwebview callHandler:@"syn.getInfo" completionHandler:^(NSDictionary * _Nullable value) {
NSLog(@"Namespace syn.getInfo: %@",value);
}];
disableJavascriptDialogBlock:(bool) disable
BE CAREFUL to use. if you call any of the javascript popup box functions (alert
, confirm
, and prompt
), the app will hang, and the javascript execution flow will be blocked. if you don't want to block the javascript execution flow, call this method, the popup box functions will return immediately( confirm
return true
, and the prompt
return empty string).
Example:
[dwebview disableJavascriptDialogBlock: true]
if you want to enable the block, just calling this method with the argument value false
.
setJavascriptCloseWindowListener:(void(^_Nullable)(void))callback
DWKWebView calls callback
when Javascript calls window.close
, you can provide a block to add your hanlder .
Example:
[dwebview setJavascriptCloseWindowListener:^{
NSLog(@"window.close called");
}];
hasJavascriptMethod:(NSString*) handlerName methodExistCallback:(void(^)(bool exist))callback
Test whether the handler exist in javascript.
Example:
// test if javascript method exists.
[dwebview hasJavascriptMethod:@"addValue" methodExistCallback:^(bool exist) {
NSLog(@"method 'addValue' exist : %d",exist);
}];
setDebugMode:(bool) debug
Set debug mode. if in debug mode, some errors will be prompted by a popup dialog , and the exception caused by the native APIs will not be captured to expose problems. We recommend that the debug mode be opened at the development stage.
customJavascriptDialogLabelTitles:(NSDictionary*) dic
custom the label text of javascript dialog that includes alert/confirm/prompt, the default text language is Chinese.
Example:
[dwebview customJavascriptDialogLabelTitles:@{
@"alertTitle":@"Notification",
@"alertBtn":@"OK",
@"confirmTitle":@"",
@"confirmCancelBtn":@"CANCEL",
@"confirmOkBtn":@"OK",
@"promptCancelBtn":@"CANCEL",
@"promptOkBtn":@"OK"
}];
"dsBridge" is accessed after dsBridge Initialization .
dsBridge.call(method,[arg,callback])
Call Java api synchronously and asynchronously。
method
: Java API name, can contain the namespace。
arg
: argument, Only one allowed, if you expect multiple parameters, you can pass them with a json object.
callback(String returnValue)
: callback to handle the result. only asynchronous invocation required.
dsBridge.register(methodName|namespace,function|synApiObject)
dsBridge.registerAsyn(methodName|namespace,function|asyApiObject)
Register javascript synchronous and asynchronous API for Native invocation. There are two types of invocation
Just register a method. For example:
In Javascript
dsBridge.register('addValue',function(l,r){
return l+r;
})
dsBridge.registerAsyn('append',function(arg1,arg2,arg3,responseCallback){
responseCallback(arg1+" "+arg2+" "+arg3);
})
In Object-c
// call javascript method
[dwebview callHandler:@"addValue" arguments:@[@3,@4] completionHandler:^(NSNumber * value){
NSLog(@"%@",value);
}];
[dwebview callHandler:@"append" arguments:@[@"I",@"love",@"you"] completionHandler:^(NSString * _Nullable value) {
NSLog(@"call succeed, append string is: %@",value);
}];
Register a Javascript API object with supplied namespace. For example:
In Javascript
//namespace test for synchronous
dsBridge.register("test",{
tag:"test",
test1:function(){
return this.tag+"1"
},
test2:function(){
return this.tag+"2"
}
})
//namespace test1 for asynchronous calls
dsBridge.registerAsyn("test1",{
tag:"test1",
test1:function(responseCallback){
return responseCallback(this.tag+"1")
},
test2:function(responseCallback){
return responseCallback(this.tag+"2")
}
})
Because JavaScript does not support function overloading, it is not possible to define asynchronous function and sync function of the same name。
In Object-c
[dwebview callHandler:@"test.test1" completionHandler:^(NSString * _Nullable value) {
NSLog(@"Namespace test.test1: %@",value);
}];
[dwebview callHandler:@"test1.test1" completionHandler:^(NSString * _Nullable value) {
NSLog(@"Namespace test1.test1: %@",value);
}];
dsBridge.hasNativeMethod(handlerName,[type])
Test whether the handler exist in Java, the handlerName
can contain the namespace.
type
: optional["all"|"syn"|"asyn" ]
, default is "all".
dsBridge.hasNativeMethod('testAsyn')
//test namespace method
dsBridge.hasNativeMethod('test.testAsyn')
// test if exist a asynchronous function that named "testSyn"
dsBridge.hasNativeMethod('testSyn','asyn') //false
dsBridge.disableJavascriptDialogBlock(disable)
Calling dsBridge.disableJavascriptDialogBlock(...)
has the same effect as calling disableJavascriptDialogBlock
in Java.
Example:
//disable
dsBridge.disableJavascriptDialogBlock()
//enable
dsBridge.disableJavascriptDialogBlock(false)
As we all know, In browser, AJax request are restricted by same-origin policy, so the request cannot be initiated across the domain. However, Fly.js supports forwarding the http request to Native through any Javascript bridge, And fly.js has already provide the dsBridge adapter.Because the Native side has no the same-origin policy restriction, fly.js can request any resource from any domain.
Another typical scene is in the hybrid App, Fly.js will forward all requests to Native, then, the unified request management, cookie management, certificate verification, request filtering and so on are carried out on Native.
More details please refer to https://github.com/wendux/fly.
If you like DSBridge, please star to let more people know it , Thank you !
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。