Включить щепотку для увеличения внутри iframe - Ionic 2 AngularJS 2

Question

Я добавил zooming="true" внутри тега, но когда страница загружена, я не могу увеличить, чтобы увеличить или уменьшить представление. Я также установил webkitallowfullscreen mozallowfullscreen allowfullscreen, чтобы масштабировать страницу, чтобы соответствовать экрану устройства, но ничего не изменилось, и страница все еще вырезана.

Чтобы объяснить эту концепцию немного лучше, я беру, например, Android родные приложения. Теперь, если вы хотите загрузить страницу из Интернета, вы используете WebView, и результат в точности соответствует использованию iframe на Ionic. Но на андроид вещей становится проще относительно настройки:

webview.getSettings().setBuiltInZoomControls(true); 

для того, чтобы щепотка к зуму и

webview.getSettings().setUseWideViewPort(true); 

, чтобы соответствовать и масштабировать веб-страницу, в зависимости от размера (мобильного) экрана. Теперь, используя 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 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); 
    } 
} 

Edit 2

После добавления id="myframe" внутри Я также пробовал функцию 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%"; 
} 

Answer 1

Я думаю, что это невозможно сделать в IFrame, поскольку это будет недостатком безопасности. что вы в основном делаете, это попытка получить доступ к веб-странице из вашего мобильного гибридного приложения (приложение Ionic в вашем случае). он не должен позволять вам запускать javascript на этой веб-странице, обходной путь для него будет отключать веб-безопасность в этом браузере или в вашем случае webview (не уверен, как это сделать на мобильных устройствах, но это ручная настройка браузера, поэтому не будет работать в ваш сценарий). более

объяснения на этом посте SecurityError: Blocked a frame with origin from accessing a cross-origin frame

Answer 2

Вам нужно будет отслеживать жест и применить изменение масштаба к IFRAME как этот document.getElementByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';

Здесь трансфокатора установлен в 50%, но это можно добавить динамически с использованием значений события жестов.