ios中iframe的scroll滚动事件替代方法

Posted 2020-09-05 web前端开发工程师

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ios中iframe的scroll滚动事件替代方法相关的知识，希望对你有一定的参考价值。

在公众号的开发中，遇到ios中iframe的scroll滚动事件失效，在此做下记录。

因为接口获取的数据必须放在iframe中展示，滚动到底部按钮变亮，如图：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>贷款合同</title>
    <% include ../include/header.html %>
</head>
<body style="background: #eee;">
<header><a href="javascript:history.back(-1)" class="return_a">返回</a>贷款合同</header>
<form action="" method="post" class="user-info-form" id="user-info-form">
    <!-- 第三步 begin -->
    <div class="three-step region-box main" >         
 
        <div class="read-agreement-box">
            <!-- <div class="h3">贷款合同</div> -->
            <div class="bd">
                <div class="iframe" >
                    <iframe src="" id="iframeContract" width="100%" frameborder="0" scrolling="auto"></iframe>
                </div>
            </div>
        </div>
        <button  class="btn-view btn" disabled="disabled" v-on:click="clickFn()">签约</button>
        
    </div>
    <!-- 第三步 end -->
</form>
</body>
<style>
    .iframe{height: 500px;width: 100%;overflow-x: hidden;overflow-y: auto;}
</style>
    <% include ../include/footer.html %>
<script>
    $(function () {

     new Vue({
        el:\'.main\',
        data:{
            iframeH:500
        },
        methods:{
            scrollFn:function(e){
                $(document.getElementById(\'iframeContract\').contentWindow).scroll(function(event) {
                    /* Act on the event */
                    var fh = $(\'#iframeContract\').height();
                    var docH = $(this).height();
                    var t = $(this).scrollTop();

                    if(docH-t-fh<=0){
                        $(\'.btn-view\').removeAttr(\'disabled\');
                    }
                });
                
            },
            clickFn:function(){
                this.$http.post(window._appPath +\'contract/confirm.do\',{
                    openId:$.cookie(\'openId\')
                },{
                    emulateJSON:true
                }).then(function(res){
                    var data = res.data; 
                    if(data.code==0){
                        CommonUtil.redirectUrl(\'loan/loan_step6.html\');
                    }else{
                        $.alert(data.message)
                    }
                })
            },
            getFn:function(){
                this.$http.post(window._appPath +\'contract/html.do\',{
                    openId:$.cookie(\'openId\')
                },{
                    emulateJSON:true
                }).then(function(res){
                    var data = res.data;if(data.code==0){
                        var obj = jQuery.parseJSON(data.data.htmlContract);
                        $(\'#iframeContract\').contents().find(\'body\').html(obj.content);
                        var h = $(\'#iframeContract\').contents().find(\'html\').height();
                        _this.iframeH = h;
                        $(\'#iframeContract\').height(h);
                        this.scrollFn();

                    }else{
                        $.alert(data.message);
                    }
                })
            }
        },
        created:function(){
            this.getFn();
            $(\'.iframe\').height($(window).height()-234);
        }
    })

});


</script>
</html>

以上是关于ios中iframe的scroll滚动事件替代方法的主要内容，如果未能解决你的问题，请参考以下文章

在 iPad 上模拟滚动事件

ScrollView可以监听滚动结束事件吗

iframe去掉滚动条的方法

iframe在ios上不能滚动问题解决

解决safari中iframe嵌入不能滚动的问题