Tabris.js Widgets: WebView

This widget can display content from a web page. There are two ways of providing content for a WebView. First, you can fill the url property to get HTML from a source. It doesn’t mean that you will always need network connection since you can provide a relative URL and ship the HTML file as a part of your application. Another option is to pass the HTML code directly to the html property. If html is filled, the url value will be ignored.

WebView comes in handy when you need some functionality, e.g., to display the original look of some web resources. User will be able to interact with elements on the page, follow links and see dynamical content, but will be limited in some actions. For example, download event is available only on Android devices.

To create a simple WebView, you will need the following JS code:

Or, if you prefer a JSX syntax:

By default, WebView will show only the HTML content, without any control elements. You can easily create them with the help of other widgets. Here is how to get yourself a URL bar:

If you have access to the source code of the webpage you want to display, you can set up communication between the webpage and the WebView. It is possible because of Window.postMessage() API. Run the code below using Tabris.js Developer App to see an example:

Use the WebView documentation page to find out more about the widget. And lots of examples of Tabris.js tools usage in the Playground – check it out!