好久木有寫點東西了，最近一直忙着開發，本來想晚上幹完活後還想再做點什麼有意義的事，直接累趴下了
，今天趁着有時間趕快把這個解決問題的過程記錄下來，備以後參考，也給其他遇到同樣問題的朋友一個思路。ok，開始吧！
二、從ipad對iframe的偏見開始說起
儘管越來越多的人不推薦使用iframe，但有些時候我們還是無法避免要使用到iframe，例如使用了kindediter（其生成的編輯框中爲一個iframe）。當你的頁面使用了iframe並且需要支持ipad訪問時，就不得不做一些工作了。
首先，是爲iframe設置高度會不起作用。無論是使用height屬性，還是在css中指定高度，都無效。解決此問題的辦法是爲iframe再加一個父容器，並且爲父容器指定高度。代碼結構應該是這樣的：
<div style="height:500px;">
<iframe style="height:500px;"></iframe>
</div>三、網上搜搜解決辦法
經搜索，網上對此還是有不少的解決辦法的，主要思想是用js解決，我找到一個比較精巧的，聲明的函數如下，代碼先貼出來：
var toScrollFrame = function(iFrame, mask){
var mouseY = 0;
var mouseX = 0;
$(iFrame).ready(function(){
$(iFrame).contents()[0].body.addEventListener('touchstart', function(e){
mouseY = e.targetTouches[0].pageY;
mouseX = e.targetTouches[0].pageX;
});
$(iFrame).contents()[0].body.addEventListener('touchmove', function(e){
e.preventDefault();
var box = $(mask);
box.scrollLeft(box.scrollLeft()+mouseX-e.targetTouches[0].pageX);
box.scrollTop(box.scrollTop()+mouseY-e.targetTouches[0].pageY);
});
});
}; 可以看到使用了jquery的語法，所以在使用時你的網頁中要引入jquery。觀其代碼，其實就是在iframe加載完畢的時候，爲內部的document添加了touchstart和touchmove監聽器，然後將滑動的數值加到外層的一個容器上。使用的時候只要在頁面加載完畢調用即可：如代碼:
<style>
.myMask{
width: 100%;
height: 245px;
overflow: auto;
}
.myFrame{
width: 100%;
height: 245px;
}
</style>
<body class="content" onload="toScrollFrame('.myFrame','.myMask')">
<div id="a">
<div class='myMask' style="height:200px; display:block;">
<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>
</div>
</div>
</body>注意：：外層div一定要設置overflow屬性爲auto，否則不能起作用。
在ipad上瀏覽一下，可以滾動了！
四、將該函數應用到項目中
如此精簡的代碼就能解決了問題，真是讓人心情大爽！好，把它應用到項目中去。接下來就該說說這個國產在線編輯器kindeditor了，功能強大，bug諸多。（若是想簡單實現富文本編輯問題不大，若想實現複雜點的功能，它可夠讓人頭疼的，爲此我已經將源碼改的千瘡百孔了。。。），使用過kindeditor的應該知道，其編輯部分是一個iframe（應該是爲了避免css與頁面中的其他定義衝突），那我們就拿這個iframe開刀。
測試頁面上，我們在body的onload事件中調用了這個函數，但是在使用編輯器的時候，頁面一開始是沒有iframe的，是在編輯器出現的時候纔有。所以調用函數的時機自然是編輯窗口創建完成後，查看kindeditor API，afterCreate，此參數正和我意。 那麼函數的兩個參數如何傳呢，看一下kiindeditor的DOM結構：
就是紅色圈出來的那兩個啦！在調用kindeditor的地方這麼寫：
afterCreate:function(){
if($.isMobile()){
$('.ke-edit').css('overflow','auto');//這個overflow千萬不能忘記！！！
toScrollFrame('.de-edit-iframe','.ke-edit');
}
}sUserAgent= navigator.userAgent.toLowerCase();
bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";
bIsMidp= sUserAgent.match(/midp/i) == "midp";
bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";
bIsAndroid= sUserAgent.match(/android/i) == "android";
bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";
bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";
//是否是移動設備
$.isMobile = function(){
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
return true;
}
return false;
}這個函數是通用的，此處只判斷客戶端是否是ipad，所以把其他的刪掉。現在全貼出來了，供大家參考。
五、結束了
好了，現在你可以享受在ipad上把iframe滑上滑下的快感了，爽！
那麼，通過這個問題學到了點什麼呢？首先，這個核心函數toScrollFrame，其實並不難寫，而我卻花了半天的時間，在網上找了各種插件，最後才把它篩選出來。假如，一開始我並沒有從網上找資料，而是自己想如何實現它，那我是不是也可以寫出這個函數呢？？或許從小白到大牛，也就在於這一點呢，有一天，遇到問題時，我自己寫出解決方案！共勉。