Ionic: перехват PDF-URL с помощью cordova-plugin-inappbrowser - PullRequest
Новая
       75

Ionic: перехват PDF-URL с помощью cordova-plugin-inappbrowser

0 голосов
/ 06 января 2019

Я создаю приложение для Android / iOS с ionic 3, которое просто состоит из веб-просмотра cordova-plugin-inappbrowser (версия 3.0.0) и адаптивной домашней страницы. Домашняя страница содержит различные ссылки на веб-сайты, а также на (онлайн) файлы PDF.

Как я узнал, веб-просмотр в Android (я еще не пробовал 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, loadtop, loaderror) не запускается. С обычным URL эти события запускаются, как и ожидалось. Есть ли другой способ перехватить эти звонки? (Насколько я вижу, в этой версии не существует события beforeload)

Спасибо за любую помощь / подсказки!

EDIT:

Я установил cordova-plugin-inappbrowser прямо из мастера github, как и предлагалось. Насколько я вижу, в модуле реализован канал beforeload. Но событие beforeload все еще не запускается. («loadstart», тем не менее, работает для URL-адресов без 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');
    });
}

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Итак, наконец, с некоторыми обходными путями я заставил это работать: 

declare var cordova: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  private iabRef;

  constructor(private inAppBrowser: InAppBrowser, private platform: Platform, private spinnerDialog: SpinnerDialog, private file: File, private fileTransfer: FileTransfer, private fileOpener: FileOpener) {

    this.platform.ready().then(() => {
      if (this.platform.is('android')) {
        this.androidBrowser();
      } else {
        this.iosBrowser();
      }
    });
  }

  iosBrowser() {
    let browser = this.inAppBrowser.create("http://someurl.com", "_blank", "location=no,navigationbuttoncolor=#ffffff);
  }

  androidBrowser() {
    let that = this;

    this.iabRef = cordova.InAppBrowser.open("http://someurl.com", "_blank", "beforeload=yes,location=no");

    this.iabRef.addEventListener('beforeload', function(params, callback){
      // If the URL being loaded is a PDF
      if(params.url.match(".pdf")){
        that.openPDF(params.url);
      } else {
        callback(params.url);
      }
    }, false);

    this.iabRef.addEventListener('loadstart', function(params, callback){
      that.spinnerDialog.show(null, null, true);
    });

    this.iabRef.addEventListener('loadstop', function(params, callback){
      that.spinnerDialog.hide();
    });

    this.iabRef.addEventListener('exit', function(params, callback){
      that.platform.exitApp();
    });
  }

  openPDF(url: string) {
    let title = url.substring(
      url.lastIndexOf("/") + 1,
      url.lastIndexOf(".pdf")
    );

    let path =  this.file.dataDirectory;

    const transfer = this.fileTransfer.create();
    transfer.download(url, path + title + '.pdf').then(entry => {
      let url = entry.toURL();
      this.fileOpener.open(url, 'application/pdf');
    });
  }
}

После установки плагина Cordova непосредственно из репозитория GitHub запускается событие «beforeload» (хотя иногда только после второго щелчка по ссылке в формате pdf, но сейчас мне придется с этим смириться). Сначала я попытался открыть PDF-URL другим cordova.InAppBrowser.open("http://someurl.com/pdffile.pdf", "_system"); Это сработало, но, как только я вернулся к своему первоначальному приложению в AppBrowser, сайт застрял. Кнопки и ссылки показывали, что на них нажимали, но браузер больше не реагировал. Поскольку я не смог решить эту проблему, я сейчас загружаю файл PDF и открываю его с помощью плагина FileOpener. Когда я сейчас возвращаюсь в приложение из pdf, браузер по-прежнему работает, как и раньше.

Для iOS я не смог запустить его с прямым плагином Cordova, как с Android. Так что, если устройство работает под управлением iOS, я открываю его с помощью встроенного плагина ionic inAppBrowser. IOS Webview прекрасно работает с PDF-файлами, хотя нет возможности загрузить отображаемый PDF-файл, для которого я пока не нашел решения.

0 голосов
/ 07 января 2019

Если вы устанавливаете cordova-plugin-inappbrowser непосредственно из главной ветки Github , в PR # 276 добавлена ​​неизданная функция, которая добавляет событие beforeload.

Сначала установите плагин непосредственно от мастера: 

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