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

一、前言

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

 

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

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

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

 

[html] view plaincopy
 
  1. <div style="height:500px;">  
  2.     <iframe style="height:500px;"></iframe>  
  3. </div>  

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

 

 

三、网上搜搜解决办法

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

 

[javascript] view plaincopy
 
  1. var toScrollFrame = function(iFrame, mask){   
  2.     var mouseY = 0;   
  3.     var mouseX = 0;   
  4.       
  5.     $(iFrame).ready(function(){   
  6.         $(iFrame).contents()[0].body.addEventListener('touchstart', function(e){   
  7.             mouseY = e.targetTouches[0].pageY;   
  8.             mouseX = e.targetTouches[0].pageX;   
  9.         });   
  10.           
  11.         $(iFrame).contents()[0].body.addEventListener('touchmove', function(e){   
  12.             e.preventDefault();   
  13.             var box = $(mask);   
  14.             box.scrollLeft(box.scrollLeft()+mouseX-e.targetTouches[0].pageX);   
  15.             box.scrollTop(box.scrollTop()+mouseY-e.targetTouches[0].pageY);   
  16.         });   
  17.     });   
  18.       
  19. };   

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

 

[html] view plaincopy
 
  1. <style>  
  2. .myMask{   
  3. width: 100%;   
  4. height: 245px;   
  5. overflow: auto;   
  6. }   
  7. .myFrame{   
  8. width: 100%;   
  9. height: 245px;   
  10. }  
  11. </style>  
  12. <body class="content" onload="toScrollFrame('.myFrame','.myMask')">  
  13. <div id="a">  
  14. <div class='myMask' style="height:200px; display:block;">   
  15. <IFRAME class='myFrame' id = "lead_frame" NAME="lead_frame" style="border-style:thin;" ALIGN="center" FRAMEBORDER="1" WIDTH="98%" HEIGHT="245" SRC='2.html'></IFrame>   
  16. </div>   
  17. </div>  
  18. </body>  


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

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

 

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

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

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

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

 

[html] view plaincopy
 
  1. afterCreate:function(){  
  2.             if($.isMobile()){  
  3.                 $('.ke-edit').css('overflow','auto');//这个overflow千万不能忘记！！！  
  4.                 toScrollFrame('.de-edit-iframe','.ke-edit');      
  5.                 }  
  6.                               
  7.     }  

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

 

 

[html] view plaincopy
 
  1. sUserAgent= navigator.userAgent.toLowerCase();   
  2.  bIsIpad= sUserAgent.match(/ipad/i) == "ipad";   
  3.  bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";   
  4.  bIsMidp= sUserAgent.match(/midp/i) == "midp";   
  5.  bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";   
  6.  bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";   
  7.  bIsAndroid= sUserAgent.match(/android/i) == "android";   
  8.  bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";   
  9.  bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";   
  10.   
  11.            
  12. //是否是移动设备  
  13. $.isMobile = function(){  
  14.     if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {   
  15.             return true;  
  16.          }  
  17.     return false;  
  18. }  


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

 

 

五、结束了

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

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

posted @ 2013-04-22 16:51  吕大豹  阅读(749)  评论(0)  编辑  收藏  举报