WebView

<WebView> is a UI component that lets you show web content in your app. You can pull and show content from a URL or a local HTML file, or you can render static HTML content.

See also: HtmlView.

<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="{{ webViewSrc }}" />

Props #

src #

<WebView src="http://nativescript-vue.org/" />

<WebView src="~/html/index.html" />

<WebView src="<div><h1>Some static HTML</h1></div>" />

webView.src = 'http://nativescript-vue.org/'
//or
webView.src = '~/html/index.html'
//or
webView.src = '<div><h1>Some static HTML</h1></div>'

Gets or sets the web content to be displayed. Valid values:

• an absolute URL,
• the path to a local HTML file,
• or static HTML.

canGoBack #

canGoBack: boolean = webView.canGoBack

Gets a value indicating whether the WebView can navigate back.

canGoForward #

canGoForward: boolean = webView.canGoForward

Gets a value indicating whether the WebView can navigate forward.

disableZoom #

webView.disableZoom = true

Disable scrolling in the WebView.

iosAllowInlineMediaPlayback #

<WebView src="https://docs.nativescript.org/" iosAllowInlineMediaPlayback="true"/>

webView.iosAllowInlineMediaPlayback = true

(iOS only) Enables inline media playback on iOS. By default, webview forces iPhone into fullscreen media playback.

Methods #

stopLoading() #

webView.stopLoading()

Stops loading the current content (if any).

goBack() #

webView.goBack()

Navigates back.

goForward() #

webView.goForward()

Navigates forward.

reload() #

webView.reload()

Reloads the current url.

Inherited #

For additional inherited properties not shown, refer to the API Reference

Events #

loadStarted #

<WebView src="https://docs.nativescript.org/" loadStarted="onLoadStarted"/>

export function onLoadStarted(args) {
  const webView = args.object as WebView

  console.log('Can go back? ', Object.keys(args))
  console.log('Can go forward? ', webView.canGoForward)
}

Emitted when the page has started loading in the <WebView>. The event data is of LoadEventData type.

loadFinished #

<WebView src="https://docs.nativescript.org/" loadFinished="onLoadFinished"/>

export function onLoadFinished(args) {
  const webView = args.object as WebView

  console.log('Can go back? ', Object.keys(args))
  console.log('Can go forward? ', webView.canGoForward)
}

Emitted when the page has finished loading in the <WebView>. The event data is of LoadEventData type.

Native component #