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.

TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages. You can then extend that class with the following TypeScript classes.

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.

TypeScript
JavaScript
TypeScript
let myScript: String = 'return "aaa"';
let callback: Function = function onResult(result) {
console.log("Result " + result);
};
this.myWebView.evaluateJS(myScript, callback); // result is null
let myScript2: String = `
function doSomething() {
return "aaa";
}
doSomething()`;
this.myWebView.evaluateJS(myScript2, callback); // result is "aaa"
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.

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import WebView = require('sf-core/ui/webview');
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myWebView: WebView;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
this.myWebView.loadURL('https://www.smartface.io');
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.myWebView = new WebView({
onChangedURL: function (event: any) {
console.log("Event Change URL: " + event.url);
return true;
},
onError: function (event: any) {
console.log("Event Error : " + event.message + ", URL: " + event.url);
},
onLoad: function (event: any) {
console.log("Event Load: " + event.url);
},
onShow: function (event: any) {
console.log("Event Show: " + event.url);
}
});
this.myWebView.android.page = this;
this.layout.addChild(this.myWebView, "myWebView", ".sf-webView", {
left: 10,
top: 10,
right: 10,
bottom: 10,
flexProps: {
positionType: "ABSOLUTE"
}
});
}
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.