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

Question

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

为了更好地解释这个概念,我采用Android原生应用程序.现在,如果您想从Web加载页面,则使用a WebView,结果就像使用iframeon一样Ionic.但在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

添加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%";
}

Answer 1

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

此处缩放设置为50%,但可以使用手势事件值动态添加.

Answer 2

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

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