如何在ionic2 InAppBrowser中添加浮动按钮

Question

我正在ionic2 InAppBrowser 中加载外部网址。我想在webview上方添加一个浮动按钮，用于捕获InAppBrowser中加载的网页的屏幕截图。有没有办法做到这一点？

Answer 1

使用 InAppBrowser 执行此操作的问题在于它将自身设置为顶级z-index，因此无论您添加什么，它都将位于其下方。

以下是使用iframe和FabButtons（或Floating Action Buttons： fab docs）的解决方法

例如：

<强> html的

<ion-content>
  <iframe no-margin name="myName" [src]=cleanUrl></iframe>
</ion-content>
<ion-fab left top>
  <button ion-fab color="danger" (click)="buttonClick()">
    <ion-icon name="arrow-dropleft"></ion-icon>
  </button>
</ion-fab>

<强> .TS

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DomSanitizer } from '@angular/platform-browser';

@IonicPage()
@Component({
  selector: '<SELECTOR HERE>',
  templateUrl: '<PAGE NAME HERE>.html',
})
export class MyPage {

  url: string;
  cleanUrl: any;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private domSanitizer: DomSanitizer   
  ) {
    this.url = 'http://www.example.com/';
  }

  ionViewWillEnter() {
    this.cleanUrl = this.sanatizeUrl(this.url);
  }

  sanatizeUrl(url: string): any{
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }

  buttonClick() {
    console.log('buttonClick');
  }
}

请注意，如果您在显示网址时出现错误，则必须使用DomSanitizer。