How to add a floating button in ionic2 InAppBrowser

Question

I am loading an external URL in ionic2 InAppBrowser. I want to add a floating button above the webview for capturing the screenshot of the webpage which is loaded in the InAppBrowser. Is there any way to do this?

Answer 1

The problem with doing that with InAppBrowser is that it sets itself as top z-index so no matter what you add it will be under it.

Here is a workaround using iframe and FabButtons(or Floating Action Buttons: fab docs)

For example:

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

Please note the use of DomSanitizer that will be necessary if you get errors displaying the url.