Nativescript webview 导航答案

【问题标题】：Nativescript webview on navigateNativescript webview 导航
【发布时间】：2017-03-10 08:23:53
【问题描述】：

nativescript 中的 webview 是否有“导航”事件？

我已经在 Xamarin (c#) 中使用

Browser.Navigating += Myfunction

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

【问题讨论】：

我不确定我是否正确理解了您的情况，但我认为您可以使用HtmlView 来显示URL。当您点击链接时，您将被重定向到设备浏览器。 <HtmlView html="www.google.com" />
事实并非如此。我有一个 WebView，当我单击 webview 内的链接时，我想检测该链接是否在 webview 中我的网站范围内，或者它是外部链接，如果它是外部链接，我想打开一个新的浏览器意图.

标签： webview nativescript uiwebviewdelegate angular2-nativescript

【解决方案1】：

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

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

希望对你有帮助

【讨论】：

【解决方案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>

这样你可以阻止导航并做任何你想做的事情:)

【讨论】：