启用捏合以在 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 中是不可能的，因为这将是一个安全漏洞。 您基本上在做的是尝试从您的移动混合应用程序（在您的情况下为 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%，但可以使用手势事件值动态添加。