WebView

API Reference: UI.WebView

WebView can show web pages and display custom HTML code. It has basic browser functions such as refresh and page navigation.

Run JavaScript Script on Webview

Use evaluateJS function for running JavaScript script on Smartface webview. This method takes an callback to handle return value.

Return Value From Script

A return value that is not inside a function doesn't handle in callback. See the below examples.

JavaScript
JavaScript
var myScript = 'return "aaa"';
var callback = function onResult(result) {
console.log("Result " + result);
};
myWebView.evaluateJS(myScript, callback); // result is null
var myScript2 = '
function doSomething() {
return "aaa";
}
doSomething();
';
myWebView.evaluateJS(myScript2, callback); // result is "aaa"

JavaScript alert function doesn't work inside evaluateJS in webview on Android platform.

Listening URL Changes inside of WebView

Use onChangedUrl callback for invoking any action you desire on Smartce webview.

OnChangedUrl callback triggers when the url is changed. If it returns false, the url cannot rendered inside the webview or on the browser.

openLinkInside property indicates whether the url will be rendered inside the webview or not. If it is set false, the url will be rendered on the browser.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const Application = require("sf-core/application");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const WebView = require('sf-core/ui/webview');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
myWebView.loadURL('https://www.smartface.io');
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myWebView = new WebView({
left: 10,
top: 10,
right: 10,
bottom: 10,
positionType: FlexLayout.PositionType.ABSOLUTE,
onChangedURL: function(event) {
console.log("Event Change URL: " + event.url);
return true;
},
onError: function(event) {
console.log("Event Error : " + event.message + ", URL: " + event.url);
},
onLoad: function(event) {
console.log("Event Load: " + event.url);
},
onShow: function(event) {
console.log("Event Show: " + event.url);
}
});
myWebView.android.page = this;
this.layout.addChild(myWebView);
}
);
module.exports = Page1;

Upload files in WebView

If you want to upload a image in WebView, webview's page property must be set.

onChangedURL will not be called for;

POST requests HTTP(S) schemes

Handling User Agent, cookies and custom events

For such cases, Smartface recommends to use webviewbridge utility maintained on Smartface Utilities.

Webviewbridge allows the developer to define custom user agent and cookie by using customNavigate, ease the usage of web callbacks and injecting bridge codes.

Remote Debugging WebViews For Android

You can debug WebViews in your application. Debugging WebViews is the same as debugging a web page. Follow the instructions for debugging:

  • Connect your device to a computer with a USB cable

  • Call the static method setWebContentsDebuggingEnabled on the WebView

  • Open the app with the WebView you want to debug

  • Open the chrome://inspect page, the page displays a list of debug-enabled WebViews on your device.

Before publishing the application

When deploying to production or publishing the app, make sure that setWebContentsDebuggingEnabled equals to false, for security purposes.