如何在 nativescript 中实现父母门

Question

我创建了一个应用，它使用了一组 YouTube 嵌入视频。 由于这是为孩子设计的，我的应用在 6 年后被删除，因为当孩子们可能不小心点击 YouTube 徽标时我没有实施家长网关 - 它会加载 YouTube 应用并继续在那里。

我试图了解，一般来说，我如何能够抓住这样的事件，当某些东西（点击）想要打开另一个应用程序（不仅仅是 youtube）时触发 - 然后激活我创建的页面家长网关 - 如果答案是正确的 - 然后我继续。

编辑：到目前为止能够做到：

• 我发现了可能有帮助的事件suspendEvent
• 我可以抓住它并转发到我的页面
• [卡住] 无法捕获加载本机应用程序的事件

不起作用：到目前为止不起作用的事情：

(1)suspendEvent，当原生应用加载时触发该事件 - 但不能阻止/禁用/控制原生应用午餐，用于中间的“家长门”（youtube应用仍然加载并在后台 - 家长门页面切换）

import { on as applicationOn } from "tns-core-modules/application";
...
applicationOn(suspendEvent, this.activateParentalGateway, this);

(2) WebViewExt

它有一个名为 WebViewExt.shouldOverrideUrlLoadingEvent 的事件，但我无法在其中加载 YouTube 插件

<WebViewExt debugMode="true" (loaded)="onWebViewLoaded($event)">
  <YoutubePlayer id="player" [src]="settings.player.src"></YoutubePlayer>
</WebViewExt>

webview.on(WebViewExt.shouldOverrideUrlLoadingEvent, (args1: ShouldOverrideUrlLoadEventData) => {
   console.log("shouldOverrideUrlLoadingEvent firing for url : ", args1.url);
   utils.openUrl(args1.url);
});        

shouldOverrideUrlLoadingEvent 有本地替代品吗？

Answer 1

我现在想分享我的解决方案，我已经看到大量与父母门相关的帖子，但都没有得到回答。

不确定 Google Play 是否会接受它，但能够在我的应用中设置家长门，如果您发现更好的东西，请分享您的答案！

所以我正在使用这个 pkg：https://github.com/Notalib/nativescript-webview-ext，它是一个 webview 组件（浏览器），我的代码看起来像这样

player.component.html

<GridLayout class="page page-content" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:nota="@nota/nativescript-webview-ext">

  ... other html code ...
  <nota:WebViewExt (loaded)="onWebViewLoaded($event)"
                   src='https://www.youtube.com/embed/{{ src }}'
                   width="100%" height="100%">
  </nota:WebViewExt>
</GridLayout>

player.component.ts

import { Component, OnInit, NgZone } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { WebView } from "tns-core-modules/ui/web-view";
import { WebViewExt, ShouldOverrideUrlLoadEventData } from "@nota/nativescript-webview-ext";

/*
  Events
*/
   onWebViewLoaded(args) {        
        let webview: WebView = args.object;

        // This code will grab any click that try to load/switch to an external app/url               
        webview.on(WebViewExt.shouldOverrideUrlLoadingEvent, (_args: ShouldOverrideUrlLoadEventData) => {
            // Disable the event
            _args.cancel = true;            

            // Switch to parental gateway
            this.activateParentalGateway(_args.url);            
        });        
    }    

    activateParentalGateway(blocked_url) {
        if (typeof(blocked_url) !== "string") {            
            return false;
        }

        // run inside the ngZone to connect the event back to the 
        // component state ( otherwise there's no "this" variable )
        this.zone.run(() => {
            this.routerExtensions.navigate(['parental_gateway', blocked_url], {
                transition: {
                    name: "fade"
                }
            });            
        });
    }

parental_gateway.component.html

这是我们问一些“成人”问题的地方......现在只制作了两个按钮来测试正确/错误的答案。

<GridLayout columns="*" rows="*">
    <StackLayout row="0" width="100%" orientation="horizontal">    
        <Label text="Answer this question please"  width="20%" height="50"></Label>
        <Button text="Correct" (tap)="answeredCorrect($event)"></Button>
        <Button text="Failed" (tap)="answeredWrong($event)"></Button>
    </StackLayout>
</GridLayout>

parental_gateway.component.ts

import { RouterExtensions } from "nativescript-angular/router";
import { openUrl } from "tns-core-modules/utils/utils";

    answeredCorrect() {
        console.log("Answer was correct");

        // openUrl will actually open the YouTube video
        // in a native app ( basically continue the event )
        openUrl(this.blocked_url);

        // In the background we want to go back from the 
        // parental gate page that we've been in
        // and switch to the video where we first clicked it.
        this.routerExtensions.backToPreviousPage();
    }

    answeredWrong() {
        console.log("Wrong answer go back");
        // Just go back to our page where we've clicked the link
        this.routerExtensions.backToPreviousPage();
    }

希望这对其他人有帮助，如果可以，请投票。