Web View
The WebView component is used to display web content within your application. You use the control by providing a src
attribute that points at a URL or a local HTML file.
Basics
The sample shows a fundamental way of using the WebView in a NativeScript application.
XML
<GridLayout rows="75 * 50">
<GridLayout row="0" rows="*" columns="50 * 50" class="form">
<Button class="btn btn-primary btn-active icon" row="0" col="0" text="" tap="goBack"/>
<TextField row="0" col="1" id="urlField" hint="Enter URL" text="{{ tftext }}" returnKeyType="done" returnPress="submit"
autocorrect="false" verticalAlignment="center" class="input input-border m-t-0" autocapitalizationType="none"/>
<Button class="btn btn-primary btn-active icon" isEnabled="{{ enabled }}" row="0" col="2" text="" tap="goForward"/>
</GridLayout>
<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="{{ webViewSrc }}" />
<Label row="2" text="{{ result }}" />
</GridLayout>
Add WebView src
and handle loadFinishedEvent
event
CSS
.icon{
font-family: 'icomoon';
vertical-align: center;
margin: 6;
}
/*WebView {
border-color: lightgray;
border-width: 0.5;
}*/
Events
The example shows the how to use the events supported by the WebView component and its reload
method.
In the sample code, we set up event loadStarted
and loadFinished
events. Both events will be fired when we change the source for the WebView component(change the URL or load local HTML file). The loadStarted
event will be executed when the WebView source start loading and loadFinished
will be fired when the source is already loaded. The events will return info about the eventName
, navigationType
and url
, which we are trying to load. If an error appears on some of the steps of source load, we will receive the corresponding error with the error
property in loadStarted
or loadFinished
events.
In the provided sample, it is also demonstrated how to reload the currently loaded source via WebView's reload
method.
Gestures
The code samples show, how we could use gestures in WebView for both platforms iOS and Android.
Note: to be able to use gestures in
WebView
component on Android, we should first disabled the zoom control. To do that we could access theandroid
property and with the help ofsetDisplayZoomControls
to set this control tofalse
.
Source Load
The example demonstrates, how to load content in the WebView component, while using a local file or while providing HTML code directly to its src
property.
XML
<GridLayout rows="100 50 * 50" columns="*">
<WebView row="0" col="0" loaded="onFirstWebViewLoaded" src="{{ firstWebViewSRC }}"/>
<Label row="1" text="{{ resultFirstWebView }}" textWrap="true" />
<WebView row="2" col="0" loaded="onSecondWebViewLoaded" src="{{ secondWebViewSRC }}"/>
<Label row="3" text="{{ resultSecondWebView }}" textWrap="true" />
</GridLayout>
Add WebView src
from local file
API Reference for the WebView Class
Native Component
Android | iOS |
---|---|
android.webkit.WebView | WKWebView |