解决kindediter中的iframe用ipad访问时无法滚动的问题

一、前言

好久木有写点东西了，最近一直忙着开发，本来想晚上干完活后还想再做点什么有意义的事，直接累趴下了，今天趁着有时间赶快把这个解决问题的过程记录下来，备以后参考，也给其他遇到同样问题的朋友一个思路。ok，开始吧！

二、从ipad对iframe的偏见开始说起

尽管越来越多的人不推荐使用iframe，但有些时候我们还是无法避免要使用到iframe，例如使用了kindediter（其生成的编辑框中为一个iframe）。当你的页面使用了iframe并且需要支持ipad访问时，就不得不做一些工作了。

首先，是为iframe设置高度会不起作用。无论是使用height属性，还是在css中指定高度，都无效。解决此问题的办法是为iframe再加一个父容器，并且为父容器指定高度。代码结构应该是这样的：

另外一个问题，就是本文的核心内容，iframe的内容很长时，ipad下无法滚动，你只能看着上半截内容干着急。。。

三、网上搜搜解决办法

经搜索，网上对此还是有不少的解决办法的，主要思想是用js解决，我找到一个比较精巧的，声明的函数如下，代码先贴出来：

可以看到使用了jquery的语法，所以在使用时你的网页中要引入jquery。观其代码，其实就是在iframe加载完毕的时候，为内部的document添加了touchstart和touchmove监听器，然后将滑动的数值加到外层的一个容器上。使用的时候只要在页面加载完毕调用即可：如代码:

注意：：外层div一定要设置overflow属性为auto，否则不能起作用。

 在ipad上浏览一下，可以滚动了！

四、将该函数应用到项目中

如此精简的代码就能解决了问题，真是让人心情大爽！好，把它应用到项目中去。接下来就该说说这个国产在线编辑器kindeditor了，功能强大，bug诸多。（若是想简单实现富文本编辑问题不大，若想实现复杂点的功能，它可够让人头疼的，为此我已经将源码改的千疮百孔了。。。），使用过kindeditor的应该知道，其编辑部分是一个iframe（应该是为了避免css与页面中的其他定义冲突），那我们就拿这个iframe开刀。

测试页面上，我们在body的onload事件中调用了这个函数，但是在使用编辑器的时候，页面一开始是没有iframe的，是在编辑器出现的时候才有。所以调用函数的时机自然是编辑窗口创建完成后，查看kindeditor API，afterCreate，此参数正和我意。 那么函数的两个参数如何传呢，看一下kiindeditor的DOM结构：

就是红色圈出来的那两个啦！在调用kindeditor的地方这么写：

可以看到我还用了一个$.isMobile函数，是用来判断客户端是否是移动设备。代码如下：

这个函数是通用的，此处只判断客户端是否是ipad，所以把其他的删掉。现在全贴出来了，供大家参考。

五、结束了

好了，现在你可以享受在ipad上把iframe滑上滑下的快感了，爽！

那么，通过这个问题学到了点什么呢？首先，这个核心函数toScrollFrame，其实并不难写，而我却花了半天的时间，在网上找了各种插件，最后才把它筛选出来。假如，一开始我并没有从网上找资料，而是自己想如何实现它，那我是不是也可以写出这个函数呢？？或许从小白到大牛，也就在于这一点呢，有一天，遇到问题时，我自己写出解决方案！共勉。