2. 程式人生 > >解決 iframe 在 iPad和iPhone 上不能滾動的問題

解決 iframe 在 iPad和iPhone 上不能滾動的問題

阿新 • • 發佈：2019-01-26
今天要在web中巢狀一個網址或本地HTML，用到了iframe，在電腦上設定scrolling=‘auto’，寬度高度，會有滾動條出現。而在ipad上會全部顯示整個網頁的寬度高度。scrolling屬性無效。原來在html5中的iframe已經只有剩下src的屬性。 
但是若設定scrolling=‘no’.還是會生效的。頁面只顯示定義的高度和寬度的大小。設定overflow:hidden都沒用。 

怎麼讓ipad safari 中的iframe的內容在固定大小中可滾動？ 

網上說要用seamless屬性。直接寫個seamless。但是這個屬性ipad的safari不支援。chrome是支援的。 

IE6 – Windows: no support 

IE7 – Windows: no support 
IE8 – Windows – Windows: no support 
IE9 beta – Windows: no support 
Firefox 3.6 – Windows: no support 
Firefox 3.6 – OSX: no support 
Firefox 4.0 – beta Windows: no support 
Firefox 4.0 – beta OSX: no support 
Safari OSX: no support 
Chrome 7 – Windows: no support 
Chrome 7 – Windows: no support 

Chrome 9 – OSX: no support 
Opera 11 – OSX: no support 

測試例子： 
http://www.maxdesign.com.au/jobs/example-seamless/ 

所以以上方法都無法解決ipad safari中iframe滾動的問題。 

解決辦法： 
在iframe外加一層div，設定樣式-webkit-overflow-scrolling:touch; overflow: scroll; 
讓超出div的內容可以通過touch來滾動。 

另外，如果iframe的src不是網址，而是本地的html，則需要給HTML的DOM新增監聽事件，讓html的body可以監聽到touch事件，讓巢狀的html也可以滾動。

[javascript] view plain copy
  1. //如果iframe的src不是網址，而是本地的html，則需要給HTML的DOM新增監聽事件，讓html的body可以監聽到touch事件，讓巢狀的html也可以滾動。
        var toScrollFrame = function(iFrame, mask) {  
                   if (!navigator.userAgent.match(/iPad|iPhone/i))  
                       return false;  
                   //如果沒有iOS，什麼也不做
                   var mouseY = 0;  
                   var mouseX = 0;  
                   jQuery(iFrame).ready(function() {//等待iFrame載入  
                       //記憶初始拖曳運動 
                       jQuery(iFrame).contents()[0].body.addEventListener('touchstart', function(e) {  
                           mouseY = e.targetTouches[0].pageY;  
                           mouseX = e.targetTouches[0].pageX;  
                       });  


                       //基於初始拖動位置更新滾動位置 
                       jQuery(iFrame).contents()[0].body.addEventListener('touchmove', function(e) {  
                           e.preventDefault();  
                           //防止整頁拖動  


                           var box = jQuery(mask);  
                           box.scrollLeft(box.scrollLeft() + mouseX - e.targetTouches[0].pageX);  
                           box.scrollTop(box.scrollTop() + mouseY - e.targetTouches[0].pageY);  
                           //MUSEX和MouSe不需要定期更新，因為當前位置  
                           //因為滑鼠相對於Tr.IFRAMY的當前位置隨著掩碼滾動而改變。.  
                       });  
                   });  
                   return true;  
               };  
               toScrollFrame('.myFrame', '.myMask');  
               
               

最終程式碼 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
  5.         <metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6.         <metaname="apple-mobile-web-app-capable"content="yes">
  7.         <metaname="apple-mobile-web-app-status-bar-style"content="black">
  8.         <title>wrapScroller demo</title>
  9.         <linkrel="stylesheet"href="../style/wrapScroller.css"type="text/css"media="screen"/>
  10.         <scripttype="text/javascript"src="../jquery-1.8.0.min.js"></script>
  11.         <scripttype="text/javascript">
  12.         </script>
  13.     </head>
  14.     <bodystyle="background: #ccc;">
  15.         <div>
  16.             HEADER - use 2 fingers to scroll contents:  
  17.         </div>
  18.         <divid="scrollee"style="width:300px;height:300px;-webkit-overflow-scrolling:touch; overflow: scroll;">
  19.             <iframeid="object"height="90%"width="100%"type="text/html"src="http://en.wikipedia.org/"></iframe>
  20.         </div>
  21.     </body>
  22. </html>


相關推薦

解決 iframe 在 iPad和iPhone 上不能滾動的問題

今天要在web中巢狀一個網址或本地HTML，用到了iframe，在電腦上設定scrolling=‘auto’，寬度高度，會有滾動條出現。而在ipad上會全部顯示整個網頁的寬度高度。scrolling屬性無效。原來在html5中的iframe已經只有剩下src的屬性。 但是若設定scrolling=‘no’.還

在 iPad和 iPhone的瀏覽器上檢視網頁原始碼

   今天使用iPad 處理OA上的問題，有個視窗不能正常工作，想檢視一下原始碼，發現iPad中的 Safari和chrome 沒有內建檢視原始碼功能。查了幾個資料，遇到的又是沒抄全的，下面是safari的設定方法： 在 iPad、iPhone 或 iPod touch 的

iPad和iPhone開發的異同

技術 control shee sent contex 完全 屏幕方向 ges 應用 iPad特有的APIiPad多了一些特有的類，比如：UIPopoverController（左圖）UISplitViewController（右圖）… … 有

ipad和iPhone在使用UIAlertController的時候出現的錯誤

如果只是手機使用，按照正常的操作就可以了，但是今天在pad上試了一把，結果奔潰了，為啥呢，列印結果大概意思就是，彈出來的那個框需要掛靠在某個檢視上，直接上程式碼吧 這是一段選擇頭像的提示框： // 編輯頭像 - (void)editHeader:(UIB

【IOS】關於ipad和iPhone尺寸的解析度

文章結合至 http://blog.csdn.net/djxiaoyu_haha/article/details/41009575                     http://news.zo

解決使用valiform和同時上傳多張圖片問題

<script src="${pageContext.servletContext.contextPath }/script/jquery-form.js" type="text/javascript"></script> <form clas

解決 iframe 在 iPad 上不能滾動的問題

今天要在web中巢狀一個網址或本地HTML，用到了iframe，在電腦上設定scrolling=‘auto’，寬度高度，會有滾動條出現。而在ipad上會全部顯示整個網頁的寬度高度。scrolling屬性無效。原來在html5中的iframe已經只有剩下src的屬性。 但是若

完美解決EditText和ScrollView的滾動沖突（上）

width ontouch 完美解決 his 滾動 on() ack can @+ 在網上搜了一下EditText和ScrollView的滾動沖突，發現差點兒全部的解決方式都是觸摸EditText的時候就將事件交由EditText處理，否則才將事件交由S

解決iframe下跨域，iphone上position:fixed失效問題

最近接觸了一個活動頁面，先說需求需求：iframe下引用另一個專案的頁面（這裡諮詢了某大神，建議手機端不要再使用iframe了，已經被遺棄了），這裡出現問題1：跨域然後就是引用的長度肯定會大於你的手機高度，需要滾動。然鵝滾動時在頁面的某個位置需要點選一個彈窗。覆蓋整個螢幕，然

完美解決EditText和ScrollView的滾動衝突（上）

在網上搜了一下EditText和ScrollView的滾動衝突，發現幾乎所有的解決方案都是觸控EditText的時候就將事件交由EditText處理，否則才將事件交由ScrollView處理。這樣確實初步解決了兩者之間的滾動衝突，但並不是最好的解決方案。比如，E

iOS UIPrintInteractionController在iPad的 iOS10 和 11上的奇怪bug

pop 沒有 wid 方向 .com 即使 nbsp log 研究 今天在彈出UIPrintInteractionController的時候，在ios10 和11的ipad 上測試，發現一直是protrait 方向彈出，結果就出現如下圖的bug： 研究了好長時間，發現是沒

利用iframe和form上傳和預覽圖片

IT color F5 method short upload pos title In URL文件 from django.contrib import admin from django.urls import path from app01 import views

真機和電腦上的shader差異性報錯的解決方案

報錯情況：non-square matrices not supported (3x1) at line 15 報錯解決方案，雙擊這個地方會指定到你shader的某一行。我這裡的 第43行 的程式碼如下 o.worldNormal = mul(unity_ObjectToWor

淘寶彈性佈局方案lib-flexible不相容ipad和ipad pro的解決方法

加上下面這一段程式碼即可 <script> /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTag

iframe+form完成圖片上傳、圖片預覽功能，期間遇到圖片無法預覽解決django

django做圖片上傳時很奇怪預覽的時候怎麼都載入不到圖片，發現圖片載入路徑含有原來url，所以在圖片路徑src 最前面加了個“/"解決OK，但是原因還是不清楚，哪位大神解答下，謝謝了。按道理obj.filepath已經包含完整路徑了，，搞不明白啊 myimg.src="/"+obj.filep

【解決Chrome瀏覽器和IE瀏覽器上傳附件相容的問題 -- Chrome關閉flash後，uploadify外掛不可用的解決辦法】

專案中遇到過這種情況： 利用uploadify外掛在IE和chrome瀏覽器中上傳附件正常， 突然有一天chrome禁用了flash外掛，uploadify外掛在chrome中就不能正常使用了，IE上正常。   =========================================

iPhone銷量下降，這兩種方法可以把Android和iPhone手機投屏到電腦上！

隨著現在科技的快速發展，智慧產品不斷的創新，各種各樣的黑科技技術逐步的呈現在我們的眼前，而今天小編要和大家討論的就是手機投屏到電腦上這一技術，就目前而言，大家對投影技術應該非常的熟悉了，不管是演講還是授課都需要使用到投影技術，但這都是建立在電腦投屏的基礎之上。 手機投屏技術

JS判斷裝置終端（PC，iPad，iPhone，android，winPhone）和瀏覽器

var ua = navigator.userAgent; var browser = {}, weixin = ua.match(/MicroMessenger\/([^\s]+)/i), we

完美解決ueditor和neditor上傳圖片(視訊)上傳成功顯示異常

(一)前言: 二次開發編輯器neditor(基於百度編輯器ueditor):介面相對於ueditor會更美觀. (二) 問題描述: 最近在公司專案中遇到一個比較奇葩的問題。neiditor編輯器上傳圖片用時，插入圖片初始為loading圖，載入成功後才顯示上傳的圖片。插入圖

【已解決】Ipad 1代-隨意下載應用軟體（此方法，同樣適用於IOS 5.1.1的Iphone手機）

手裡一個16GB的Ipad 1代，10寸的屏，電池等都很耐用，曾經的經典平板，然而卻因為蘋果對IOS 5這些低版本不再支援，所以下載應用成了大問題！ 當時想著給京東回收吧，誰知他孃的才給130，這簡直是糟蹋東西，一氣之下決定自己再試試，結果還真的弄好了，各種應用隨便下。 P