ionic2 InAppBrowserでフローティングボタンを追加する方法

Question

ionic2で外部URLをロードしていますInAppBrowser。 InAppBrowserにロードされているWebページのスクリーンショットをキャプチャするために、webviewの上にフローティングボタンを追加したいと思います。これを行う方法はありますか？

Answer 1

InAppBrowserでそれを行う際の問題は、それがトップz-indexとして設定されているため、追加する内容がその下にあるということです。例えば

：ここ

はiframeとFabButtons（ fab docs又はFloating Action Buttonsを）使用してこの問題を回避ある

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

URLを表示するエラーが出た場合に必要となりますDomSanitizerの使用に注意してください。