今 天要在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也可以滚动。

    var toScrollFrame = function(iFrame, mask) {

                        if (!navigator.userAgent.match(/iPad|iPhone/i))

                            return false;

                        //do nothing if not iOS devie  

                        var mouseY = 0;

                        var mouseX = 0;

                        jQuery(iFrame).ready(function() {//wait for iFrame to load

                            //remeber initial drag motition

                            jQuery(iFrame).contents()[0].body.addEventListener('touchstart', function(e) {

                                mouseY = e.targetTouches[0].pageY;

                                mouseX = e.targetTouches[0].pageX;

                            });  

                            //update scroll position based on initial drag position

                            jQuery(iFrame).contents()[0].body.addEventListener('touchmove', function(e) {

                                e.preventDefault();

                                //prevent whole page dragging  

                                var box = jQuery(mask);

                                box.scrollLeft(box.scrollLeft() + mouseX - e.targetTouches[0].pageX);

                                box.scrollTop(box.scrollTop() + mouseY - e.targetTouches[0].pageY);

                                //mouseX and mouseY don't need periodic updating, because the current position

                                //of the mouse relative to th iFrame changes as the mask scrolls it.

                            });

                        });  

                        return true;

                    };  

                    toScrollFrame('.myFrame', '.myMask');

最终代码

    <!DOCTYPE html>

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

            <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

            <meta name="apple-mobile-web-app-capable" content="yes">

            <meta name="apple-mobile-web-app-status-bar-style" content="black">

            <title>wrapScroller demo</title>

            <link rel="stylesheet" href="../style/wrapScroller.css" type="text/css" media="screen" />

            <script type="text/javascript" src="../jquery-1.8.0.min.js"></script>

            <script type="text/javascript">  

            </script>

        </head>

        <body style="background: #ccc;">

            <div>

                HEADER - use 2 fingers to scroll contents:

            </div>

            <div id="scrollee" style="width:300px;height:300px;-webkit-overflow-scrolling:touch; overflow: scroll;">

                <iframe id="object" height="90%" width="100%" type="text/html" src="http://en.wikipedia.org/"></iframe>

            </div>

        </body>

    </html>

参考： 
http://stackoverflow.com/questions/6139564/iframe-size-on-ipad 
http://jsfiddle.net/CobaltBlueDW/zHR8s/ 
http://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute

 

iframe在ipad safari的显示的更多相关文章

  1. iframe in ipad safari

    http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebconten ...

  2. Ipad Safari iframe cookie 当浏览器默认禁用第三方COOKIE

    前一阵子,我们发现高版本的Safari中默认会阻止第三方cookie,如下图所示. 问题 什么是第三方cookie呢?在访问一个网站A时,网站A算作第一方,如果网站A中引用了另一个网站X(网站X的域名 ...

  3. 轻松进行iPad Safari设置

    推荐 通过iPad Safari设置,iPad中的Safari可以让我们看到我们想看的影片.动画和Web应用程序,关闭部分内容以保护我们的隐私安全和设备安全,至于如何进行iPad Safari设置,下 ...

  4. ipad safari 滚动（overflow）解决方案

    项目需要放到ipad应用了,发现有一个奇怪的问题,就是我div是设置滚动属性的,在pc上面的各个浏览器页面变小时,会出现滚动条,可是是ipad的safari,则不会滚动,开始以为是div的问题 但发现 ...

  5. Easyui弹出窗体在iframe的父级页面显示

    今天做EasyUI学习的预到了一个这样的问题:通过iframe加载的一个页面在调用$.messager.alert();这个方法后只能在iframe中显示alert效果而不是在全局的页面上显示这并不我 ...

  6. IE下iframe不能正常加载,显示空白

    下午帮忙看了一个web问题,index.html中嵌入<iframe>来加载同文件目录下的一个页面,在多个浏览器下测试,发现IE浏览器中会出现问题,<iframe>不能正常加载 ...

  7. 关于iPad上模态显示视图中的UITextField，UITextView在输入完成后无法回收键盘的问题解决。

    在iPad开发过程中遇到一个问题,UITextField 存在由UIModalPresentationFormSheet 弹出的带导航条的视图控制器中时,调用 resignFirstResponder ...

  8. iframe 实现网页本页显示

    <el-dialog title="" :visible.sync="dialogVisible"> <iframe src="ht ...

  9. jqGrid在IE中使用iframe嵌套,页码条不显示问题

    在网页顶部加: 红色部分必须是:XHTML1.0

随机推荐

  1. 搭建Android 5.0开发环境

    1.Android SDK的安装 下载地址:http://developer.android.com/index.html 访问网站的话请自备梯子 选择:adt-bundle-windows-x86_ ...

  2. IOS之资源收集--很好的github网址

    1.Nick Jensen 2.关于直播的

  3. iOS之UI--通讯录的实例关键知识技术点积累

    通讯录的实例关键知识技术点积累 效果展示: 作为博文笔记,既然是笔记,目的是为了能够以后做这个项目能够快速上手,如果这是我下一次阅览这个博文笔记,那么我应该先空手从零开始做,需求也就是这个项目的展示效 ...

  4. Swift面向对象基础（上）——Swift中的类和结构体（上）

    学习来自<极客学院> import Foundation //1.定义类和结构体 /* [修饰符]calss 类名{ 零到多个构造器 零到多个属性 零到多个方法 零到多个下标 } 修饰符可 ...

  5. jhljx跑跑跑（找规律）

    题目来源:https://biancheng.love/contest/41/problem/D/index jhljx跑跑跑 题目描述 数学不好的jhljx又在和别人打牌,他们一共m人每人n张牌,牌 ...

  6. 读书摘要：第七章 闩Suan锁和自旋锁

    摘要: 1.闩锁就像是内存上的锁,随着越来越多的线程参与进来,他们争相访问同一块内存,导致堵塞.2.自旋锁就是闩锁,不同之处是如果访问的内存不可用,它将继续检查轮询一段时间.3.拴锁和自旋锁是我们无法 ...

  7. Java学习总结：飘逸的字符串

    Java学习:飘逸的字符串 前言 相信不管我们运用Java语言来开发项目还是进行数据分析处理,都要运用到和字符串相关的处理方法.这个社会处处有着和字符串相关的影子:日志.文档.书籍等.既然我们离不开字 ...

  8. Swing应用开发实战系列之二：设计日期选择面板窗口

    Swing本身没有提供什么华丽丽的日期时间选择控件,所以笔者就在网上搜了个第三方的jar包jdatepicker-1.3.2.jar,基于此设计了个很轻量的日期选择面板,很简单的.效果图如下所示: 代 ...

  9. Linux学习之二——档案与目录的属性和权限

    一.属性和权限的基本概念 Linux一般将档案可存取的身份分为三个类别,分别是 owner/group/others,这三种身份各有 read/write/execute 等权限. 所有的系统上的账号 ...

  10. OFFICE2013实现选中单元格所在行、列高亮显示

    在你要实现此功能的工作表标签右击,在弹出的菜单中选择编辑代码,然后输入下面代码保存即可! 如没有出现效果,则可能是禁用了宏的关系.所以要在安全选项中启用宏选项. Private Sub Workshe ...