How to load files into webview in native script

Question

I\'ve been trying to figure out a way to get a local webpage content to load and set the webview html content in native script. I\'ve successfully got it working on the sim

Answer 1

Here is an example how to add WebView src from local file. In the example has been shown the both cases with nativescript-webview-interface plugin and without it. ~/ returns the path to your app folder.

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" loaded="onLoaded">
  <GridLayout rows="150 *" columns="*">
      <WebView row="0" col="0" id="WebViewId"/>
      <WebView row="1" col="0" id="WebViewId2"/>
  </GridLayout>
</Page>

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
var webViewInterfaceModule = require("nativescript-webview-interface");
import {WebView} from "ui/web-view";

var oWebViewInterface;
export function onLoaded(args: EventData) {
  let page = <Page>args.object;
  var webView:WebView = <WebView>page.getViewById('WebViewId');
  oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/index.html');
  var SecondWebView:WebView = <WebView>page.getViewById('WebViewId2');
  SecondWebView.src="~/secondpage.html"
  page.bindingContext = new HelloWorldModel();
}