你的位置:首页 > 软件开发 > 网页设计 > ios中iframe的scroll滚动事件替代方法

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

发布时间:2017-03-17 00:01:08
在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录。因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图:代码如下:<!DOCTYPE html><html><head> <title& ...

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

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

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

代码如下:

<!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 >**合同</div> -->      <div class="bd">        <div class="iframe" >          <iframe src='/images/loading.gif' data-original="" 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>

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:ios中iframe的scroll滚动事件替代方法

关键词:IOS

IOS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。