webview_javascript_bridge 2.0.0
webview_javascript_bridge: ^2.0.0 copied to clipboard
A bridge for JavaScript communicate with webview_flutter.
A bridge for JavaScript communicate with webview_flutter.
Android | iOS | |
---|---|---|
Support | SDK 19+ or 20+ | 9.0+ |
Features #
- handle message from JavaScript structured.
- send message to JavaScript easier.
Usage #
Before using this package, your need setup with Flutter and JavaScript.
Flutter #
First of all, add webview_javascript_bridge
as a dependency in your pubspec.yaml file. Just run:
flutter pub add webview_javascript_bridge
And then create the bridge instance and init:
late final _bridge = WebViewJavaScriptBridge();
late WebViewController _webviewController = WebViewController()
// your code
..addJavaScriptChannel(
webviewJavaScriptBridgeChannel,
onMessageReceived: _bridge.receiveMessage,
)
// your code
@override
void initState() {
super.initState();
// your code
_bridge.updateWebViewController(_webviewController);
// your code
}
Finally, don't forget add your message handler for JavaScript, such as Toaster:
@override
void initState() {
super.initState();
/// add handler
_bridge.addMessageHandler(ClosureMessageHandler(
resolver: (message, controller) => message.action == "toaster",
handler: (message, controller) {
// TODO: show the toaster
print(message);
return null;
},
));
}
JavaScript #
First of all, install the package webview-javascript-bridge
. Just run:
yarn add webview-javascript-bridge
or with npm:
npm install webview-javascript-bridge
Next, import webViewJavaScriptBridge
as your need:
import webViewJavaScriptBridge from 'webview-javascript-bridge';
Finally, sending a message!
async function sendingMessage() {
let response = await webViewJavaScriptBridge.sendMessage({
action: 'tester',
params: 123456,
});
console.log("tester's response", response);
}
If your use TypeScript, go to example for more details.
❗️Tips #
1. The imp of BridgeJavascriptMessageHandler in Flutter must
return a jsonable
type #
_bridge.addMessageHandler(
ClosureMessageHandler(
resolver: (m, c) => m.action == "toaster",
handler: (m, c) {
// ❗️❗️❗️❗️
return "this value will response to JavaScript, and it must be jsonable";
},
),
);
2. You will get a exception, if a JavaScript function return null
or undefined
#
final ret = await _bridge.sendMessage(function:"aJavaScriptFunctionReturningNullOrUndefined");
////// ⬆️ will be empty string.