Nativescript - 在 Web 视图中单击按钮时打开浏览器答案

【问题标题】：Nativescripts - Opening a browser on button click in a web viewNativescript - 在 Web 视图中单击按钮时打开浏览器
【发布时间】：2018-01-11 03:53:54
【问题描述】：

我正在使用 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，但我不确定如何在我的网络视图中点击特定元素时监听点击事件。

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');
    });
}

【问题讨论】：

要在浏览器中打开网址吗？
是的，在单击 Web 视图内的链接时

标签： ios nativescript angular2-nativescript

【解决方案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());
  }
}

【讨论】：

感谢您的支持。但是（1）这个答案在 JS 中并且正在寻找 TS（2）在 iOS 上不起作用
请注意：在 Android lvl 21+ 上，url 需要用作console.log('---> open url ', url.getUrl().toString());，如果您想使用openUrl

【解决方案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());
} 
}

【讨论】：