Nativescript webview on navigate

Question

Is there a "navigate" event on webview in nativescript?

I've done it in Xamarin (c#) with

Browser.Navigating += Myfunction

Is there any event like this in nativescript? I would like to make it so that if i click on a link outside my scope of the website then i want the device to open a webpage of that url and not navigate inside of the webview.

Answer 1

To do this you could handle the WebView loadStartedEvent, and to verify the URL whether is in the scope of your site. If it is not, you could set new URL to the webview and you will be able to prevent the user to go in different web page. I am attaching sample code.

main-page.xml

<Page xmlns:RL="nativescript-ripple" xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
 <GridLayout>
     <WebView src="https://www.google.bg/" id="wv" />

 </GridLayout>
</Page>

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import {StackLayout} from "ui/layouts/stack-layout";
import {WebView, LoadEventData} from "ui/web-view"

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {

  let page = <Page>args.object;

  var webview:WebView = <WebView> page.getViewById("wv");
    webview.on(WebView.loadStartedEvent, function (args: LoadEventData) {

        let message;
        console.log("url "+args.url.substring(0, 21));
        console.log("eventName "+args.eventName);
        console.log("navigationType "+args.navigationType);
        if(args.url.substring(0, 21) !== "https://www.google.bg/"){
          (<WebView>args.object).url="https://www.google.bg/";
          console.log("returns back");
        }
    });
}

Hope this helps