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

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

Чтобы объяснить эту концепцию немного лучше, я беру, например, собственные приложения Android. Теперь, если вы хотите загрузить страницу из Интернета, вы используете WebView, и результат будет точно таким же, как с помощью iframe on 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);
    }

Надеюсь, ты поможешь мне.

Edit

Я добавил 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%";
}

Ответ 1

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

больше объяснений по этому сообщению SecurityError: заблокирован фрейм с исходным кодом от доступа к кадру с поперечным началом

Ответ 2

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

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