WebView

Using a WebView requires the web-view module.

import * as webViewModule from "tns-core-modules/ui/web-view";

Declaring a WebView.

//  <Page>
//       {%raw%}<WebView src="{{ someUrl | pathToLocalFile | htmlString }}" />{%endraw%}
//  </Page>

Creating a WebView

let webView = new webViewModule.WebView();

Using WebView with remote URL

webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) {
    let message;
    if (!args.error) {
        message = "WebView finished loading " + args.url;
    }
    else {
        message = "Error loading " + args.url + ": " + args.error;
    }

});
webView.src = "https://github.com/";

Using WebView with local file

webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) {

    let message;
    if (!args.error) {
        message = "WebView finished loading " + args.url;
    }
    else {
        message = "Error loading " + args.url + ": " + args.error;
    }
});
webView.src = "~/ui/web-view/test.html";

Using WebView with raw HTML

webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) {

    let message;
    if (!args.error) {
        message = "WebView finished loading " + args.url;
    }
    else {
        message = "Error loading " + args.url + ": " + args.error;
    }
});
webView.src = '<!DOCTYPE html><html><head><title>MyTitle</title><meta charset="utf-8" /></head><body><span style="color:red">TestÖ</span></body></html>';

Using WebView with gestures

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>

    <GridLayout>
        <WebView loaded="webViewLoaded"  touch="webViewTouch" pan="webViewPan" src="<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>" />
    </GridLayout>
</Page>
import { EventData } from 'tns-core-modules/data/observable';
import { WebView } from "tns-core-modules/ui/web-view";
import { isAndroid } from "tns-core-modules/platform"

export function navigatingTo(args: EventData) {
    console.log("page navigating to");
}

export function webViewTouch(args){
    console.log("touch event");
}

export function webViewPan(args){
    console.log("pan gesture");
}

export function webViewLoaded(args){
    var webview:WebView = <WebView>args.object;
    if(isAndroid){
        webview.android.getSettings().setDisplayZoomControls(false);
    }
}

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 the android property and with the help of setDisplayZoomControls to set this controll to false.

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.