首页 > 代码库 > ios中iframe的scroll滚动事件替代方法

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滚动事件替代方法