Nativescript Plugin for bi-directional communication between WebView and Android/iOS
From the terminal, go to your app's root folder and execute:
tns plugin add nativescript-webview-interface
Once the plugin is installed, you need to copy plugin file for webView into your webView content folder. e.g
cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
For a quick start, you can check this Demo App and Blog Post
Insert a web-view somewhere in your page.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
....
<web-view id="webView" src="~/www/index.html"></web-view>
....
</Page>Initialize WebViewInterface Plugin in your javascript file.
var webViewInterfaceModule = require('nativescript-webview-interface');
var oWebViewInterface;
function pageLoaded(args){
page = args.object;
setupWebViewInterface(page)
}
// Initializes plugin with a webView
function setupWebViewInterface(page){
var webView = page.getViewById('webView');
oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView);
}Use any API Method of WebViewInterface Class
function handleEventFromWebView(){
oWebViewInterface.on('anyEvent', function(eventData){
// perform action on event
});
}
function emitEventToWebView(){
oWebViewInterface.emit('anyEvent', eventData);
}
function callJSFunction(){
oWebViewInterface.callJSFunction('functionName', args, function(result){
});
}If you want to emit an event or call a JS function on load of the page, you need to call all such code once webView is loaded
webView.on('loadFinished', (args) => {
if (!args.error) {
// emit event to webView or call JS function of webView
}
});Import nativescript-webview-interface.js in your html page.
<html>
<head></head>
<body>
<script src="path/to/nativescript-webview-interface.js"></script>
<script src="path/to/your-custom-script.js"></script>
</body>
</html>Use any API Method of window.nsWebViewInterface inside webview
var oWebViewInterface = window.nsWebViewInterface;
// register listener for any event from native app
oWebViewInterface.on('anyEvent', function(eventData){
});
// emit event to native app
oWebViewInterface.emit('anyEvent', eventData);
// function which can be called by native app
window.functionCalledByNative = function(arg1, arg2){
// do any processing
return dataOrPromise;
}API Methods of WebViewInterface Class
Use this method to assign listener to any event/command emitted from webView.
Callback will be executed with the data sent from webView in any format.
Use this method to emit any event/command from native app to webView with data in any format.
callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void
Use this method to call to any javascript function in global scope in webView.
Arguments are optional. But if supplied, must be in array format.
If the function is successfully executed, the successHandler will be called with the result returned by the JS Function. If promise is returned from the JS Function, the resolved value will come as result.
If the function execution generates any error, the errorHandler will be called with the error.
Use this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.
API Methods available in window.nsWebViewInterface global variable.
Use this method to assign listener to any event/command emited from native app.
Callback will be executed with the data sent from native app in any format.
Use this method to emit any event/command from webView to native app with data in any format.