android - ionic : Intercept PDF URLs with cordova-plugin-inappbrowser

Question

我正在使用 ionic 3 构建一个 Android/iOS 应用程序，它仅由 cordova-plugin-inappbrowser(版本 3.0.0)的 webview 和一个响应式主页组成。主页包含指向网站以及(在线)PDF 文件的不同链接。

据我了解，Android 中的 webview(我还没有尝试过 iOS)不支持打开 PDF 文件。这就是为什么我想拦截调用的 URL，并以其他方式打开它们，如果它们以 '.pdf' 结尾:

import { Component } from '@angular/core';
import {InAppBrowser, InAppBrowserObject, InAppBrowserOptions} from "@ionic-native/in-app-browser";

export class HomePage {

  options : InAppBrowserOptions = {
    location : 'no',//Or 'no'
    hidden : 'no', //Or  'yes'
    clearcache : 'yes',
    clearsessioncache : 'yes',
    zoom : 'no',//Android only ,shows browser zoom controls
    hardwareback : 'yes',
    mediaPlaybackRequiresUserAction : 'no',
    shouldPauseOnSuspend : 'no', //Android only
    closebuttoncaption : 'Close', //iOS only
    disallowoverscroll : 'no', //iOS only
    toolbar : 'no', //iOS only
    enableViewportScale : 'no', //iOS only
    allowInlineMediaPlayback : 'no',//iOS only
    presentationstyle : 'pagesheet',//iOS only
    fullscreen : 'yes'//Windows only
  };

  constructor(private inAppBrowser: InAppBrowser) {
    this.openWithCordovaBrowser('http://url.tohomepage.com');
  }

  public openWithCordovaBrowser(url : string){
    let target = "_self";
    this.browser = this.inAppBrowser.create(url,target,this.options);
    this.browser.on('loadstart').subscribe((event) => {
      if(event.url.endsWith('.pdf'))
      {
        //Open PDF in some other way
      }
    });
    this.browser.on('loadstop').subscribe((event) => {
    });
    this.browser.on('exit').subscribe((event) => {
    });
  }
}

我现在的问题是，当调用 PDF-URL 时，3 个事件(loadstart、loadstop、loaderror)都没有被触发。使用通常的 URL，这些事件会按预期触发。有没有其他方法可以拦截这些电话？ (据我所知这个版本不存在beforeload事件)

感谢您的帮助/提示!

---

编辑:

我按照建议直接从 github master 安装了 cordova-plugin-inappbrowser。据我所知，“beforeload” channel 是在模块中实现的。但是 'beforeload' 事件仍然没有触发。 (不过，“loadstart”适用于非 PDF 网址)。

declare var cordova: any;
...

constructor() {
    var iabRef = cordova.InAppBrowser.open("http://someurl.com", "_blank", "beforeload=yes");

    iabRef.addEventListener('beforeload', function(params, callback){
      alert('Beforeload fired');

      // If the URL being loaded is a PDF
      if(params.url.match(".pdf")){
        // Open PDFs in system browser (instead of InAppBrowser)
        cordova.inAppBrowser.open(params.url, "_system");
      }else{
        // Invoke callback to load this URL in InAppBrowser
        callback(params.url);
      }
    });

    iabRef.addEventListener('loadstart', function(params, callback){
      alert('Loadstart fired');
    });
}

Answer 1

如果您直接从 Github master branch 安装 cordova-plugin-inappbrowser , PR #276 添加了一个未发布的功能它添加了一个 beforeload 事件。

首先直接从 master 安装插件:

cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser

然后像这样使用它:

// Open InAppBrowser on initial page
var iabRef = cordova.InAppBrowser.open("http://www.someurl.com", "_blank", "beforeload=yes");

// Add beforeload event handler which is called before each new URL is loaded into the InAppBrowser Webview
iabRef.addEventListener('beforeload', function(params, callback){
    // If the URL being loaded is a PDF
    if(params.url.match(".pdf")){
        // Open PDFs in system browser (instead of InAppBrowser)
        cordova.InAppBrowser.open(params.url, "_system");
    }else{
        // Invoke callback to load this URL in InAppBrowser
        callback(params.url);
    }
});