开发者社区> 技术mix呢> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

解决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. sUserAgentnavigator.userAgent.toLowerCase();   
  2.  bIsIpadsUserAgent.match(/ipad/i) == "ipad";   
  3.  bIsIphoneOssUserAgent.match(/iphone os/i) == "iphone os";   
  4.  bIsMidpsUserAgent.match(/midp/i) == "midp";   
  5.  bIsUc7sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";   
  6.  bIsUcsUserAgent.match(/ucweb/i) == "ucweb";   
  7.  bIsAndroidsUserAgent.match(/android/i) == "android";   
  8.  bIsCEsUserAgent.match(/windows ce/i) == "windows ce";   
  9.  bIsWMsUserAgent.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,其实并不难写,而我却花了半天的时间,在网上找了各种插件,最后才把它筛选出来。假如,一开始我并没有从网上找资料,而是自己想如何实现它,那我是不是也可以写出这个函数呢??或许从小白到大牛,也就在于这一点呢,有一天,遇到问题时,我自己写出解决方案!共勉。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
多Iframe版后台,在一个iframe切换到另一个iframe,同时刷新
多Iframe版后台,在一个iframe切换到另一个iframe,同时刷新
0 0
js监听页面或元素scroll事件,滚动到底部或顶部
js监听页面或元素scroll事件,滚动到底部或顶部
0 0
js:监听页面滚动scroll的距离
js:监听页面滚动scroll的距离
0 0
js禁止滚动条滚动,并且滚动条不消失,页面大小不变
//禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',function (e) { $(document).
641 0
javascript设置网页刷新或者重新加载后滚动条的位置不变
有个同事说再javascript中你可以做任何你想做的事情,当时觉得不以为然,今天遇到个问题,就是页面重新加载后总是回到页面的顶部,如果客户只想看到他想看到的部分是怎么变化的,这个体验就好了。原本想象应该有页面设置scroll之类的,没有看到,在网上搜到一个方法就是在页面加载前用cookie记录滚动条的位置,加载之后从cookie中取回这个值再设置滚动条的位置,这个方法如此风骚。
592 0
刷新标签中的iframe,调用iframe中的函数
if(Ext.isIE){ if(parent.document.frames[id].document.getElementById("graphContainer") != null){ //parent.
429 0
能隐藏IFRAME的滚动条吗?我知道的三种方法
1. 设置iframe scrolling="no" 2. 被包含页body应用overflow:hidden 3. 被包含页的body标签加scroll="no"
425 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载