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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

一些颜色工具网站

网址:http://www.digitdesigns.com/colrPick/framePic.htm

29510
来自专栏非著名程序员

推荐几个比较炫酷效果的开源项目和开源库

上次推送了一篇关于推荐开源项目和开源库的文章,引起的反响不错,那我就持续搞下去,继续分享我收藏和看到的不错的开源库。相信这些推送应该对大家的帮助很大。 Shin...

35180
来自专栏测试2017

test

Markdown 是用来生成 HTML 结构的。样式和结构分离,算是其设计思想之一。而这也是现在 HTML 的发展方向。作为印证,<center> 这样的纯为样...

22600
来自专栏九彩拼盘的叨叨叨

我完成的百度前端技术学院任务列表

18620
来自专栏DeveWork

一些移动 Web 前端开发上的要点记录

从五月份实习到现在快三个月了,这三个月的实习时段,按照leader 的要求,每天要写日总结发RTX 内部群,每周都要写周邮件群发整个部门——就这么坚持了三个月。...

26470
来自专栏黑泽君的专栏

HTML是什么?HTML版本发展

 参考链接:http://www.w3cwhy.com/css-html/w3c-html.html

36740
来自专栏Thinks

设计师使用SVG的必读文章

导语-“本文适合设计师浅读,适合有追求的设计师和UI开发同学仔细研读“

55140
来自专栏逸鹏说道

html5网页中用video标签无法播放MP4视频的解决方法

今天一位朋友Q我说:为什么我录制的MP4视频在本地可以播放但是使用html5的video多媒体播放标签不能正常播放只有一个进度条而不显示图像?当时我也很好奇MP...

99460
来自专栏IMWeb前端团队

react css组织的另一种选择styled-components

本文作者:IMWeb linq 原文出处:IMWeb社区 未经同意,禁止转载 写 React 的同学肯定纠结过 CSS 该怎么组织的问题。传统 WEB...

264100
来自专栏IMWeb前端团队

polymer组件化与vm特性

一、Polymer Polymer是Google在2013年的Google I/O大会上提出了一个新的UI框架。Polymer的实现使用了WebComponen...

26880

扫码关注云+社区

领取腾讯云代金券