iframe在ipad safari的显示
今 天要在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的显示的更多相关文章
- iframe in ipad safari
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebconten ...
- Ipad Safari iframe cookie 当浏览器默认禁用第三方COOKIE
前一阵子,我们发现高版本的Safari中默认会阻止第三方cookie,如下图所示. 问题 什么是第三方cookie呢?在访问一个网站A时,网站A算作第一方,如果网站A中引用了另一个网站X(网站X的域名 ...
- 轻松进行iPad Safari设置
推荐 通过iPad Safari设置,iPad中的Safari可以让我们看到我们想看的影片.动画和Web应用程序,关闭部分内容以保护我们的隐私安全和设备安全,至于如何进行iPad Safari设置,下 ...
- ipad safari 滚动(overflow)解决方案
项目需要放到ipad应用了,发现有一个奇怪的问题,就是我div是设置滚动属性的,在pc上面的各个浏览器页面变小时,会出现滚动条,可是是ipad的safari,则不会滚动,开始以为是div的问题 但发现 ...
- Easyui弹出窗体在iframe的父级页面显示
今天做EasyUI学习的预到了一个这样的问题:通过iframe加载的一个页面在调用$.messager.alert();这个方法后只能在iframe中显示alert效果而不是在全局的页面上显示这并不我 ...
- IE下iframe不能正常加载,显示空白
下午帮忙看了一个web问题,index.html中嵌入<iframe>来加载同文件目录下的一个页面,在多个浏览器下测试,发现IE浏览器中会出现问题,<iframe>不能正常加载 ...
- 关于iPad上模态显示视图中的UITextField,UITextView在输入完成后无法回收键盘的问题解决。
在iPad开发过程中遇到一个问题,UITextField 存在由UIModalPresentationFormSheet 弹出的带导航条的视图控制器中时,调用 resignFirstResponder ...
- iframe 实现网页本页显示
<el-dialog title="" :visible.sync="dialogVisible"> <iframe src="ht ...
- jqGrid在IE中使用iframe嵌套,页码条不显示问题
在网页顶部加: 红色部分必须是:XHTML1.0
随机推荐
- 2015年第5本(英文第4本):Death on the Nile尼罗河上的惨案
书名:Death on the Nile 作者: Agatha Christie 单词数:7.9万(读完后发现网上还有一个版本,总共2.7万单词,孩子都能读懂,看来是简写版) 词汇量:6700 首万词 ...
- ORA-00257归档日志写满的解决方法
背景: 在前一篇博客中我们提到了如何启动或关闭oracle的归档(ARCHIVELOG)模式,在我成功设定数据库为归档模式以后, 第二天再次尝试连接数据库,报错:ORA-00257.在网上找到了一圈资 ...
- iOS自定义AlertView 与 ActionSheet 遮罩提示+弹出动画
产品大人总是能够想到很多让人欣慰的点子,基本所有能提示的地方都要很多文案啊图片之类 由此封装了一个半透明黑色遮罩的alert类(假装有图.jpg) 代码略糙,just share (逃 下载链接
- C++语言-04-重载
相关概念 重载 在同一作用域中为某个函数和运算符指定多个定义,分别成为函数重载和运算符重载 重载声明 与之前已经在作用域内声明过的函数或方法具有相同名称的声明,参数列表和定义不同 重载决策 调用一个重 ...
- 多线程基础(六)GCD基础
更多值得学习的GCD知识,可以学习: Grand Central Dispatch (GCD) Reference GCDObjC 1.GCD的基本概念 什么是GCD 全称是Grand Cen ...
- nyoj 170 网络的可靠性
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=170 思路:统计每个节点的度,将度为1的节点消去所需要的最少的边即为答案. 代码: #in ...
- 开发一个App要多少钱?APP开发报价单,APP开发外包有哪些注意事项-广州达到信息www.ddapp.com.cn
来源:广州达到信息著作权归广州达到信息所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作为一个APP开发从业者,经常会有人问到:开发一个App要多少钱?下面针对这个问题来好好解答解答正经的谈 ...
- Quicksum -SilverN
quicksum Given a string of digits, find the minimum number of additions required for the string to e ...
- runv kill 流程分析
1.runv/kill.go Action: func(context *cli.Context) 该函数做的工作很简单,就是通过grpc客户端,发送一个grpc请求而已,如下: c.Signal(n ...
- 深度优先搜索 codevs 1031 质数环
codevs 1031 质数环 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 一个大小为N(N<=17)的质数环是 ...