启用捏缩放内部iframe - Ionic 2 AngularJS 2

Question

我在标签内添加了zooming="true"但是当页面加载时我无法缩放以增加或减少视图。 我还设置了webkitallowfullscreen mozallowfullscreen allowfullscreen来缩放页面以适应设备屏幕，但没有任何改变，页面仍然被剪切。

为了更好地解释这个概念，我采用Android原生应用程序。 现在，如果您想从Web加载页面，则使用WebView ，结果就像在Ionic上使用iframe一样。 但在Android上，事情变得更简单：

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错误 ：

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

在<iframe>添加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，如此document.getElementByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';

此处缩放设置为50％，但可以使用手势事件值动态添加。

Answer 2

我认为在IFrame中不可能做到这一点，因为这将是一个安全漏洞。 您基本上正在尝试从您的移动混合应用程序（在您的情况下为Ionic App）访问网页。 它不能允许你在该网页上运行javascript，解决方法是通过在该浏览器或你的案例webview中禁用web安全性（不确定如何在移动设备中执行此操作，但这是手动浏览器自定义，因此无法在您的网页中使用场景）。

有关此帖子的更多解释SecurityError：阻止具有原点的帧访问跨源帧