web-dev-qa-db-ja.com

ピンチを有効にしてiframe内をズームする-Ionic 2 AngularJS 2

タグ内に_zooming="true"_を追加しましたが、ページが読み込まれると、ズームしてビューを拡大または縮小できません。また、デバイスの画面に合わせてページを拡大縮小するように_webkitallowfullscreen mozallowfullscreen allowfullscreen_を設定しましたが、何も変更されず、ページはまだカットされています。

この概念を少しよく説明するために、たとえばAndroidネイティブアプリを取り上げます。ここで、Webからページをロードする場合は、WebViewを使用します。結果は、iframeでIonicを使用する場合とまったく同じです。しかしAndroidでは、カスタマイズに関しては物事が簡単になります：

_webview.getSettings().setBuiltInZoomControls(true);
_

ピンチツーズームを有効にし、

_webview.getSettings().setUseWideViewPort(true);
_

（モバイル）画面のサイズに応じて、Webページに合わせて拡大縮小します。現在、_Windows 10_を使用して_native iOS apps_を構築することは不可能なので、_cross-platform development_に依存する必要があります。

これが私の_detail-page_です：html：

_<ion-content>
  <iframe sandbox class="link" frameborder="0" [src]="webPage()" zooming="true" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</ion-content>
_

scss：

_detail-page {

    .scroll-content{
        padding: 0px ;
    }

    ::-webkit-scrollbar,
    *::-webkit-scrollbar {
        display: none;
    }

    iframe.link {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }

}
_

ts：

_webPage() {
        return this.sanitizer.bypassSecurityTrustResourceUrl(this.entry.getElementsByTagName('link')[0].textContent);
    }
_

あなたが私を助けることができることを願っています。

編集

document.getElementsByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';を追加しましたが、TypeScriptエラーが発生します。

_TypeScript Error
Property 'contentWindow' does not exist on type 'NodeListOf<HTMLIFrameElement>'.
_

これが私の_.ts_ファイル全体です。

_export class DetailPage {

    entry:any = [];

    constructor(private sanitizer: DomSanitizer, public nav: NavController, navParams:NavParams) {
        console.log('run');
        this.nav = nav;
        this.entry = navParams.get('selectedEntry');
        console.log('My entry is: "'+ this.entry.getElementsByTagName('title')[0].textContent + '"');

        document.getElementsByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';
    }

    webPage() {
        return this.sanitizer.bypassSecurityTrustResourceUrl(this.entry.getElementsByTagName('link')[0].textContent);
    }
}
_

編集2

_id="myframe"_内に_<iframe>_を追加した後、関数ngAfterViewInit()も試しましたが、まだ変更はありません。

_ngAfterViewInit() {
  var x = document.getElementById("myframe");
  var y = (<HTMLIFrameElement> x).contentWindow.document;
  y.body.style.zoom = "50%";
}
_

そしてこの形でも：

_ngAfterViewInit() {
    var iframe:HTMLIFrameElement = <HTMLIFrameElement>document.getElementById('myframe');
    var iWindow = (<HTMLIFrameElement>iframe).contentWindow.document;
    iWindow.body.style.zoom = "50%";
}
_
htmlangulariframeionic2
28
Pier

これはセキュリティ上の欠陥となるため、IFrameでは実行できないと思います。あなたが基本的にやっているのは、モバイルハイブリッドアプリ（あなたの場合はIonicアプリ）からWebページにアクセスしようとすることです。それはあなたがそのウェブページでJavaScriptを実行することを許可してはいけません、それの回避策はそのブラウザまたはあなたの場合はウェブビューでウェブセキュリティを無効にすることです（モバイルでそれを行う方法がわからないがそれは手動のブラウザのカスタマイズであるためあなたのでは機能しませんシナリオ）。

この投稿の詳細 SecurityError：Origin with a frame from Access from cross-Origin frame

6
Ankit

ジェスチャーを追跡し、ズームの変更を次のようにiframeに適用する必要がありますdocument.getElementByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';

ここではズームは50％に設定されていますが、ジェスチャーイベント値を使用して動的に追加できます。

7
Vinit Sarvade