在公众号的开发中，遇到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滚动事件替代方法的更多相关文章

  1. iOS中常用的四种数据持久化方法简介

    iOS中常用的四种数据持久化方法简介 iOS中的数据持久化方式,基本上有以下四种:属性列表.对象归档.SQLite3和Core Data 1.属性列表涉及到的主要类:NSUserDefaults,一般 ...

  2. vue添加滚动事件,解决简书Carol_笑一笑方案中vue移除滚动事件失效的问题

    在写项目的时候,遇到了需要添加滚动事件的问题,在简书Carol_笑一笑这里找到了解决方案.代码如下 <script> export default { name:"vue-scr ...

  3. ios中iframe页面出现白屏问题

    最近用ionic3开发的一个项目在ios中出现了白屏的问题 banner轮播图跳转网页 使用了iframe 但是却时不时的出现白屏现象 在android中一切正常 网上查资料发现 是因为ios不允许访 ...

  4. iOS 中Block以及Blocks的使用,闭包方法调用

    OC: -(void)dataWithUrl:(NSString*)string AndId:(NSInteger)id returnName:(void(^)(NSString*name))back ...

  5. C# 中删除控件的事件的方法类

    方法一: 代码 /// <summary> /// 删除指定控件的指定事件 /// </summary> /// <param name="control&qu ...

  6. Android中getDrawable和getColor过时的替代方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 Android SDK 升级到 23 之后,getDrawable和getColor方法提示过时. 解决方案 getResources(). ...

  7. 解决safari中iframe嵌入不能滚动的问题

    做完了个webapp之后,开发的时候一直在浏览器上模拟ios,没有任何问题,谁知交差的时候,客户告知在ios浏览器中不能滚动嵌入的iframe,直接就滚动外层整个document了,你知道docume ...

  8. ios中fixed元素在滚动布局中的延时渲染问题

    在之前做的一个demo中,有个视图是内滚动的,里边有个bar用了fixed,不是fixed在最外层视图的顶部和底部,在微信/safari/chrome/其他浏览器app上都没出现问题. 然后今天,我把 ...

  9. IOS中iframe的滚动条不启作用

    引自:https://www.cnblogs.com/weinan/archive/2013/01/05/2832800.html 问题描述: iframe设置了高度(例如500px).倘若ifram ...

随机推荐

  1. Task 6.2站立会议二

    今天,我们开始自己开始编译运行代码了,服务器端,聊天界面的相关代码经过测试.大家都把自己的实验过程公布了,大家的交流对实验的进度也起到了很大的作用.明天我们要继续修改实验中的错误,然后大家一起把实验基 ...

  2. Task 4.3 求环形数组的最大子数组和

    任务要求:输入一个整形数组,数组里有正数也有负数. 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和.    如果数组A[0]……A[j-1]首尾相邻,允许A[i-1], …… A[n- ...

  3. 《Spring2之站立会议8》

    <Spring2之站立会议8> 昨天,添加了登录界面: 今天,准备添加注册界面: 遇到的问题:过程中遇到了一些困难,不过还是解决了.

  4. Date 类的使用

    package com.Date.Math; import java.text.ParseException; import java.text.SimpleDateFormat; import ja ...

  5. 【CSAPP笔记】8. 汇编语言——数据存储

    下面介绍一些C语言中常见的特殊的数据存储方式,以及它们在汇编语言中是如何表示的. 数组 数组是一种将标量数据聚集成更大数据类型的方式.实现数组的方式其实十分简单,也非常容易翻译成机器代码.C语言的一个 ...

  6. 404 Note Found团队-项目UML设计

    目录 团队信息 分工选择 课上分工 课下分工 ToDolist alpha版本要做的事情 燃尽图 UML 用例图 状态图 活动图 类图 部署图 实例图 对象图 时序图 包图 通信图 贡献分评定 课上贡 ...

  7. 使用Fabric自动化你的任务

    Fabric是一个Python库,可以通过SSH在多个host上批量执行任务.你可以编写任务脚本,然后通过Fabric在本地就可以使用SSH在大量远程服务器上自动运行.这些功能非常适合应用的自动化部署 ...

  8. .NET项目中常用的32个正则表达式总结

    最近没事总结了下最近所用到的正则表达式,下面32个是经常用到的,总结下来与大家分享. . "^-?[1-9]\\d*$",//整数 . "^[1-9]\\d*$" ...

  9. [2017BUAA软工]第2次个人作业

    软工第2次个人作业--代码复审 一.代码复审Check List 1.概要部分 代码能符合需求和规格说明么? 能正确处理题目要求,代码能符合需求和规格. 代码设计是否有周全的考虑? 能正确生成和解出数 ...

  10. 减小Delphi 2010/delphi XE编译出来的文件大小

    1.禁用RTTI 禁用的方法很简单,就是要在工程(dpr文件中.Delphi2010下项目文件是dproj文件,但dpr文件仍然是默认的编写代码的项目文件)的Uses语句前添加下面的定义就可以了: { ...