在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  iOS/ iOS 中 h5 頁面 iframe 頁面樣式莫名變大

iOS 中 h5 頁面 iframe 頁面樣式莫名變大

簡單的插入 <iframe /> 并設(shè)置寬高后，發(fā)現(xiàn)在 Android 手機瀏覽器上打開可以正常運行，但是在 iOS 手機上會有 iframe 頁面樣式莫名變大

<div class="common-page about-us-page" id="about-us-page">
    <iframe id="zhx-iframe" frameborder="0"  src="https://m.zbjsaas.com/zhouse"></iframe>
</div>

解決方案：
<iframe scrolling='no' /> 頁面正常但是這種方法會導(dǎo)致 iframe 中的 content 顯示不全，超出 iframe 高度的部分會直接被裁剪掉。

暫時找不到其他解決方法
目前 document.getElementById('zhx-iframe') 打印出來是空

document.getElementById('zhx-iframe').onload = function(){
    var doc = document.getElementById('zhx-iframe').contentDocument;        
}

如圖：

clipboard.png

回答
編輯回答
蔚藍色
<style>
.about-us-page{overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;position: relative;}
iframe{width: 1px; min-width: 100%; *width: 100%;}
</style>
<script type="text/javascript">
    $(function () {
        //判斷電腦端還是手機端
        if(/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
            $('#zhx-iframe').attr('scrolling','no')
        }
        //計算iframe高度
        $('#about-us-page').css({'height':$(window).height()-$('.ui-footer').height(),'width':$(window).width()});
        $('#zhx-iframe').css({'min-height':$(window).height()-$('.ui-footer').height()});
    })
</script>
<!--內(nèi)容部分-->
<div class="common-page about-us-page" id="about-us-page">
    <iframe id="zhx-iframe" frameborder="0"  width="100%" src="https://m.zbjsaas.com/topic"></iframe>
</div>
<!--內(nèi)容部分-->

ios系統(tǒng) 添加scrolling=no屬性，iframe屬性為width: 1px; min-width: 100%; *width: 100%;，iframe外層屬性為overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;
此上已實現(xiàn)頁面顯示正常，但是頁面上點擊標(biāo)簽跳轉(zhuǎn)到對應(yīng)位置 功能失效，需要優(yōu)化iframe內(nèi)頁外層樣式，即：
body{position: fixed; width: 100%; height: 100%; overflow: hidden;padding-top: 0;}
.zhouse-page{ height: 100%;overflow-y: scroll;overflow-x: hidden;-webkit-overflow-scrolling:touch;}

2017年9月2日 23:14