在公众号的开发中，遇到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>
时间： 2024-07-31 14:20:52