IOS手机端不支持iframe解决方法

最新推荐文章于 2024-05-20 00:08:16 发布

原创最新推荐文章于 2024-05-20 00:08:16 发布 · 1.6w 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一种解决在iPhone上使用iframe时页面滚动条缺失及底部按钮不显示的技术方案。通过调整iframe内外页面的样式与脚本，确保了内容的完整展示与交互元素的正常工作。

解决了在iphone上页面调用iframe没有滚动条及底部按钮不显示的问题。

(调试项目：中智二期微信版)

页面A


<div class="popover-bg">
    <div class="popover-type-filter-bg">
        <iframe src="B" height="100%" frameborder="0"></iframe>
    </div>
</div>
<script>
document.body.style.position='fixed'; //防止iframe页上下滚动时带动本页移动
document.body.style.position='static';//取消禁止滚动
</script>

页面B

<!DOCTYPE html>
<html>
<head>
<style>
    .wrapper{-webkit-overflow-scrolling:touch;overflow: auto;}
</style>
</head>
<body>
<div class="container search-page">
    <div class="list-group search-list">
        展示超过手机屏幕长度的内容处...
    </div>
</div>
<div class="fixed-bottom">
    <button type="button" class="btn btn-default col-6">重置</button>
    <button type="button" class="btn btn-warning col-6">确定</button>
</div>
</body>
</html>
<script>
    var UA = navigator.userAgent;
    var forIOS = function(){
        if(!UA.match(/iPad/) && !UA.match(/iPhone/) && !UA.match(/iPod/)){return;}
        if($('#wrapper').length){return;}
        $('body div').eq(0).addClass('wrapper');
        $('.search-list').height(500);

    }();
</script>