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.

API Reference for the WebView Class

Native Component

Android iOS
android.webkit.WebView UIWebView

Image

Basic Web View

HTML

<GridLayout rows="75 * 50" sdkExampleTitle sdkToggleNavButton>
    <GridLayout row="0" rows="*" columns="50 *" class="form">
        <Button class="btn btn-primary btn-active icon" row="0" col="0" text="&#xea44;" (tap)="goBack()"></Button>
        <TextField #urlField row="0" col="1" hint="Enter URL" [text]="webViewSrc" returnKeyType="done" (returnPress)="submit(urlField.text)"
            autocorrect="false" verticalAlignment="center" class="input input-border m-t-0" autocapitalizationType="none"></TextField>
    </GridLayout>
    <WebView row="1" #myWebView [src]="webViewSrc"></WebView>
    <Label row="2" #labelResult></Label>
</GridLayout>

Add WebView src and handle loadFinishedEvent event

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
import { WebView, LoadEventData } from "ui/web-view";
import { Page } from "ui/page";
import { TextField } from "ui/text-field";
import { Label } from "ui/label";

@Component({
    moduleId: module.id,
    templateUrl: "./basic-web-view.component.html",
    styleUrls: ["./style.css"]
})
export class BasicWebViewComponent implements AfterViewInit {
    public webViewSrc: string = "https://docs.nativescript.org/";

    @ViewChild("myWebView") webViewRef: ElementRef;
    @ViewChild("urlField") urlFieldRef: ElementRef;
    @ViewChild("labelResult") labelResultRef: ElementRef;

    ngAfterViewInit() {
        let webview: WebView = this.webViewRef.nativeElement;
        let label: Label = this.labelResultRef.nativeElement;
        label.text = "WebView is still loading...";

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

            label.text = message;
            console.log("WebView message - " + message);
        });
    }

    goBack() {
        let webview: WebView = this.webViewRef.nativeElement;
        if (webview.canGoBack) {
            webview.goBack();
        }
    }

    submit(args: string) {
        let textField: TextField = this.urlFieldRef.nativeElement;

        if (args.substring(0, 4) === "http") {
            this.webViewSrc = args;
            textField.dismissSoftInput();
        } else {
            alert("Please, add `http://` or `https://` in front of the URL string");
        }
    }
}

CSS

.icon{
    font-family: 'icomoon';
    vertical-align: center;
    margin: 6;
}

/*WebView {
    border-color: lightgray; 
    border-width: 0.5;
}*/

Improve this document

Demo Source


Web View Html

HTML

<GridLayout rows="100 *" columns="*">
    <WebView row="0" col="0" [src]="firstWebViewSRC"></WebView>
    <WebView row="1" col="0" [src]="secondWebViewSRC"></WebView>
</GridLayout>

Add WebView src from local file

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    templateUrl: "./web-view-html.component.html",
})
export class WebViewHtmlComponent {
    public firstWebViewSRC = '<!DOCTYPE html><html><head><title>MyTitle</title><meta charset="utf-8" /></head><body><span style="color:#0099CC; text-align: center;">First WebView</span></body></html>';
    public secondWebViewSRC = "~/ui-category/web-view/web-view-html/test.html";
}

Improve this document

Demo Source


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.