iframe içinde yakınlaştırmak için tutamı etkinleştir - İyonik 2 AngularJS 2

Question

Etiketin içine zooming="true" ekledim, ancak sayfa yüklendiğinde görünümü büyütmek veya küçültmek için yakınlaştırma yapılamıyor. Cihaz ekranına sığacak şekilde sayfayı ölçeklendirmek için webkitallowfullscreen mozallowfullscreen allowfullscreen'u ayarlıyorum ancak hiçbir şey değişmedi ve sayfa hala kesildi.

Bu konsepti biraz daha iyi açıklamak gerekirse, örneğin Android yerel uygulamalar. Şimdi, web'den bir sayfa yüklemek istiyorsanız, WebView kullanın ve sonuç, Ionic numaralı telefondan iframe'u kullanmak gibidir.

webview.getSettings().setBuiltInZoomControls(true); 

tutam-to-zoom sağlamak ve

webview.getSettings().setUseWideViewPort(true); 

(mobil) ekranının boyutuna bağlı olarak web sayfasına sığdırmak ve ölçek: Ama android şeylere özelleştirme konusunda daha basit hale gelir. Şimdi, native iOS apps'u oluşturmak için Windows 10'u kullanmam mümkün değil, bu yüzden cross-platform development'a güvenmem gerekiyor.

İşte benim 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); 
    } 

bana yardım edebilir Umut.

Düzenleme

Ben document.getElementsByTagName('iframe').contentWindow.document.body.style = 'zoom:50%'; eklendi ama typescript hata alıyorum:

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

İşte benim bütün .ts dosyasıdır:

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

Düzenleme 2

'un içine ekledikten sonra, ngAfterViewInit() işlevini denedim, ancak yine de hiçbir değişiklik yapmaya çalıştım.

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

Ve de bu formda

:

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

Answer 1

Bir IFrame'de bir güvenlik hatası olacağından bunun mümkün olmadığını düşünüyorum. temel olarak yaptığınız şey, mobil hibrit uygulamanızdan (durumunuzdaki İyonik Uygulama) bir web sayfasına erişmeye çalışmaktır. o web sayfasında javascript'i çalıştırmanıza izin vermemelidir, bunun için web tarayıcısının veya tarayıcınızın web görünümünde web güvenliğini devre dışı bırakacaksınız (mobilde nasıl yapılacağından emin değilsiniz, ancak bu, manuel tarayıcı özelleştirme işlemidir. senin senaryonun). Bu yazı SecurityError: Blocked a frame with origin from accessing a cross-origin frame

Answer 2

Sen jest izlemek ve yakınlaştırma ayarlandığında İşte bu document.getElementByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';

gibi iframe'inize yakınlaştırma değişikliği uygulamak gerekecektir % 50, ancak bu, hareket olay değerlerini kullanarak dinamik olarak eklenebilir.