原生脚本 - 在Web视图中单击按钮时打开浏览器

Question

我使用NativeScripts angular在我的应用程序内创建一个Web视图。当我单击Web视图中的按钮时，我想在浏览器中打开一个网页。

This post shows how to do it using swift和我有能力在我的iOS project using the marshaling technique中使用本机库，但我很难转换为Typescript。

ngOnInit(): void {
    if(isIOS)
    {
        let webView = UIWebView;
        let loadREquest = NSURLRequest;
        let navType = UIWebViewNavigationType.LinkClicked;
    }
}

我的第二次尝试是使用this plugin但我不确定如何在我的Web视图中点击特定元素时监听click事件。

import {Component, OnInit, ElementRef, AfterViewInit } from "@angular/core";
import {WebView, LoadEventData} from "ui/web-view";
import { Page } from "tns-core-modules/ui/page";
import {isAndroid, isIOS} from "platform";
let webViewInterfaceModule = require('nativescript-webview-interface');
import * as utils from 'utils/utils';

export class AboutComponent implements OnInit, AfterViewInit {
@ViewChild('webview') webView: ElementRef;
private oLangWebViewInterface;

constructor(private page: Page){}

ngAfterViewInit() {
    this.setupWebViewInterface();
}

private setupWebViewInterface() {
    let webView: WebView = this.webView.nativeElement;

    this.oLangWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, 'http://myurl.net/about');

     //Is it possible to structure this to listen for the click of an element in my web view with id of #navigate
    this.oLangWebViewInterface.on('click', function(eventData){
        utils.openUrl('https://energy.gov');
    });
}

Answer 1

这已在NativeScript论坛上提出并回答：https://discourse.nativescript.org/t/how-to-make-links-in-a-webview-to-open-in-the-default-browser/945/2

为完整起见，这是代码：

exports.webViewLoaded = function(args) {
  var webview = args.object;
  var TNSWebViewClient =
      android.webkit.WebViewClient.extend({
        shouldOverrideUrlLoading: function(view, url) {
          if (url != null && url.startsWith("http://")) {
            console.log(url);
            // use openUrl form utils module to open the page in a browser
            return true;
          } else {
            return false;
          }
        }

      });
  if (isAndroid) {
    webview.android.getSettings().setDisplayZoomControls(false);
    webview.android.getSettings().setBuiltInZoomControls(false);
    webview.android.setWebViewClient(new TNSWebViewClient());
  }
}

Answer 2

这是适用于Android 8和9（已测试）的Android版本。 iOS没有，如果有人有想法请发表评论。

exports.webViewLoaded = function(args) {
var webview = args.object;  
if (platformModule.isAndroid) {
var TNSWebViewClient =
    android.webkit.WebViewClient.extend({
        shouldOverrideUrlLoading: function(view, url) {
            console.log('Show url parameters: '+url);   
            // utilityModule.openUrl(url); // for API below 24
            utilityModule.openUrl(parseInt(platformModule.device.sdkVersion) < 24 ? 
url : url.getUrl().toString()); 
            return true; 
        } 
    });
} else { 
    // else iOS
    console.log("ios webview preocessing"); 
}
if (platformModule.isAndroid) {
      console.log("for android platform");
  webview.android.getSettings().setDisplayZoomControls(false);
  webview.android.getSettings().setBuiltInZoomControls(false);
  webview.android.setWebViewClient(new TNSWebViewClient());
} 
if(platformModule.isIOS){
    console.log("for ios platform");
    webview.ios.scrollView.scrollEnabled = true; 
    webview.ios.scrollView.bounces = true;
    //webview.ios.setWebViewClient(new TNSWebViewClient());
} 
}