SDBridgeJava is here.
If your h5 partner confused about how to deal with iOS and Android. This Demo maybe help.
最常见的问题. WebViewJavascriptBridge is not defined 的处理方案.
是js或者ts在使用的时候，WebViewJavascriptBridge对象还没有挂载到window上 ，让js或者ts自己挂载!!!
I strongly recommend https://jitpack.io
repositories {
...
maven { url 'https://jitpack.io' }
}
dependencies {
implementation 'com.github.SDBridge:SDBridgeKotlin:1.0.3'
}- Instantiate bridge with a WebView in Kotlin:
@SuppressLint("SetJavaScriptEnabled")
private fun setupView(){
val buttonSync = findViewById<Button>(R.id.buttonSync)
val buttonAsync = findViewById<Button>(R.id.buttonAsync)
mWebView = findViewById(R.id.webView)
setAllowUniversalAccessFromFileURLs(mWebView!!)
buttonSync.setOnClickListener(this)
buttonAsync.setOnClickListener(this)
bridge = WebViewJavascriptBridge(_context = this,_webView = mWebView )
bridge?.consolePipe = object : ConsolePipe {
override fun post(string : String){
println("33333")
println(string)
}
}
bridge?.register("DeviceLoadJavascriptSuccess",object : Handler {
override fun handler(map: HashMap<String, Any>?, callback: Callback) {
println("Next line is javascript data->>>")
// println(map)
val result = HashMap<String, Any>()
result["result"] = "Android"
callback.call(result)
}
})
mWebView!!.webViewClient = webClient
// Loading html in local ，This way maybe meet cross domain. So You should not forget to set
// /*...setAllowUniversalAccessFromFileURLs... */
// If you loading remote web server,That can be ignored.
mWebView!!.loadUrl("file:///android_asset/Demo.html")
}
private val webClient = object : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
println("shouldOverrideUrlLoading")
return false
}
override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
println("onPageStarted")
bridge?.injectJavascript()
}
override fun onPageFinished(view: WebView?, url: String?) {
println("onPageFinished")
}
}- In Kotlin, and call a Javascript Sync/Async function:
override fun onClick(v: View?){
when(v?.id){
R.id.buttonSync -> {
val data = java.util.HashMap<String, Any>()
data["AndroidKey00"] = "AndroidValue00"
//call js Sync function
bridge?.call("GetToken", data, object : Callback {
override fun call(map: HashMap<String, Any>?){
println("Next line is javascript data->>>")
println(map)
}
})
}
R.id.buttonAsync ->{
val data = java.util.HashMap<String, Any>()
data["AndroidKey01"] = "AndroidValue01"
//call js Async function
bridge?.call("AsyncCall", data, object : Callback {
override fun call(map: HashMap<String, Any>?){
println("Next line is javascript data->>>")
println(map)
}
})
}
}
}- In javascript file or typescript and html file like :
<div id="SDBridge"> web content </div>
<script>
// Give webview 1.5s to load other javascript files.
setTimeout(()=>{
console.log("Javascript: Hello World.");
const bridge = window.WebViewJavascriptBridge;
// JS tries to call the native method to judge whether it has been loaded successfully and let itself know whether its user is in android app or IOS app
bridge.callHandler('DeviceLoadJavascriptSuccess', {key: 'JSValue'}, function(response) {
let result = response.result
if (result === "iOS") {
console.log("Javascript was loaded by IOS and successfully loaded.");
document.getElementById("SDBridge").innerText = "Javascript was loaded by IOS and successfully loaded.";
window.iOSLoadJSSuccess = true;
} else if (result === "Android") {
console.log("Javascript was loaded by Android and successfully loaded.");
document.getElementById("SDBridge").innerText = "Javascript was loaded by Android and successfully loaded.";
window.AndroidLoadJSSuccess = true;
}
});
// JS register method is called by native
bridge.registerHandler('GetToken', function(data, responseCallback) {
console.log(data);
document.getElementById("SDBridge").innerText = "JS get native data:" + JSON.stringify(data);
let result = {token: "I am javascript's token"}
//JS gets the data and returns it to the native
responseCallback(result)
});
bridge.registerHandler('AsyncCall', function(data, responseCallback) {
console.log(data);
document.getElementById("SDBridge").innerText = "JS get native data:" + JSON.stringify(data);
// Call await function must with (async () => {})();
(async () => {
const callback = await generatorLogNumber(1);
let result = {token: callback};
responseCallback(result);
})();
});
function generatorLogNumber(n){
return new Promise(res => {
setTimeout(() => {
res("Javascript async/await callback Ok");
}, 1000);
})
}
},1500);
</script>1.Kotlin can get console.log Multi parameter.
1.Optimized coding.
1.Optimized coding.
SDBridgeSwift is released under the MIT license. See LICENSE for details.