导航上的 Nativescript webview

Question

nativescript 中的 webview 是否有 "navigate" 事件？

我已经在 Xamarin (c#) 中用

完成了

Browser.Navigating += Myfunction

nativescript中有这样的事件吗？我想这样做，如果我在我的网站范围之外单击 link，那么我希望设备打开该 url 的网页，而不是在 webview 内部导航。

Answer 1

为此，您可以处理 WebView loadStartedEvent，并验证 URL 是否在您的站点范围内。如果不是，您可以将 new URL 设置为 webview，您将能够阻止用户进入不同的网页。我附上示例代码。

主要-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>

主要-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");
        }
    });
}

希望对您有所帮助

Answer 2

对于使用 NativeScript-Vue 的人，我只是这样做了：

<template>
  <Page actionBarHidden="true">
    <WebView :src="html" @loadStarted="onLoadStarted" />
  </Page>
</template>

<script>
export default {
  methods: {
    onLoadStarted (event) {
      console.log('navigation detected with destination :', event.url)
    }
  }
}
</script>

这样你就可以阻止导航并为所欲为:)

导航上的 Nativescript webview

Nativescript webview on navigate

webview

uiwebviewdelegate

nativescript

angular2-nativescript