zoukankan      html  css  js  c++  java

  • 解决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.  100%;   
    4. height: 245px;   
    5. overflow: auto;   
    6. }   
    7. .myFrame{   
    8.  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，其实并不难写，而我却花了半天的时间，在网上找了各种插件，最后才把它筛选出来。假如，一开始我并没有从网上找资料，而是自己想如何实现它，那我是不是也可以写出这个函数呢？？或许从小白到大牛，也就在于这一点呢，有一天，遇到问题时，我自己写出解决方案！共勉。
  • 相关阅读:
    前端总结（设计向）
    bootstrap 样式规范总结
    angular2学习---模板学习
    angular2学习 -- 基本配置学习
    前端相关小技巧以及问题总结
    认识hasLayout——IE浏览器css bug的一大罪恶根源 转
    bug 由于浏览器缓存而引起的ajax请求并没有获取到服务器最新数据从而导致的bug
    总结 好用的工具/网站/插件
    .NET FrameWork完全卸载
    ASP.NET4.0项目部署到Win7系统的IIS上
  • 原文地址：https://www.cnblogs.com/lvdabao/p/3035888.html
Copyright © 2011-2022 走看看