移动端中iframe缩放

问题来源于此，需在移动端页面中嵌入iframe页面，如下图。

iframe页面属于PC页面，无视口缩放，而移动端页面有视口缩放

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

iframe页面受此影响，也会出现放大问题：

<div class="formData">
    <iframe id="iframe" class="ifr" src="./notarizationForm.html" frameborder="0"></iframe>
</div>
<div class="footer-button" style="border-top:1px solid #f2f2f2">
        <button class="button btn-half def">取消预约</button>
        <button class="button btn-half fr">重新预约</button>
    </div>

<div class="formData">
    <iframe id="iframe" class="ifr" src="./notarizationForm.html" frameborder="0"></iframe>
</div>
<div class="footer-button">
     <button>取消预约</button><button>重新预约</button>
</div>

解决以上问题，可考虑引入transform的scale，在iframe加载完成后获取其宽高，并与父元素进行比例换算

let ifr = document.getElementById('iframe')
ifr.onload = function(){
    let wd = ifr.contentWindow.document.documentElement.scrollWidth;
    let ht = ifr.contentWindow.document.documentElement.scrollHeight;
    let x = document.getElementsByClassName('formData')[0].clientWidth / wd;
    ifm.style.width = wd +'px';
    ifm.style.height = ht +'px';
    ifm.style.transform = `scale(${x})`;
    ifm.style.transformOrigin='0 0';
}

出现另外一个问题，

iframe虽然变小了，但实际上的占位并没有改变，真实高度依然达到了1000以上，所以出现很长的滚动条，可以在iframe与父元素中间加入一个容器，用来展示缩小后的iframe，

<div class="formData">
    <div class="box">
        <iframe id="iframe" class="ifr" src="./notarizationForm.html" frameborder="0"></iframe>
    </div>
</div>

let ifr = document.getElementById('iframe')
ifr.onload = function(){
    let wd = ifr.contentWindow.document.documentElement.scrollWidth;
    let ht = ifr.contentWindow.document.documentElement.scrollHeight;
    let x = document.getElementsByClassName('formData')[0].clientWidth / wd;
    ifm.style.width = wd +'px';
    ifm.style.height = ht +'px';
    ifm.style.transform = `scale(${x})`;
    ifm.style.transformOrigin='0 0';
    
    document.getElementsByClassName('box')[0].style.height = ht*x + 'px'

}

.formData{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.box{
    width:100%;
    overflow: hidden;
}

如有更好的方法，望赐教

移动端中iframe缩放

猜你喜欢