在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录。因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图:代码如下:<!DOCTYPE html><html><head> <title& ...
在公众号的开发中,遇到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 >**合同</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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。