启用捏入以放大iframe-Ionic 2 AngularJS 2

Question

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

为了更好地解释这个概念，我以Android原生应用程序为例。现在，如果你想从网上加载一个页面，你可以使用WebView，结果就像在Ionic上使用iframe一样。但在安卓系统上，定制变得更简单：

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：阻止具有原点的帧访问跨原点帧

Answer 2

您需要跟踪手势并将缩放的更改应用于iframe，如下所示document.getElementByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';

这里，缩放设置为50%，但可以使用手势事件值动态添加。