- 浏览: 1075290 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (290)
- php (65)
- javascript (36)
- html5 (31)
- thinkphp (9)
- mysql (16)
- jquery (13)
- node.js (9)
- css (9)
- android 开发 (8)
- flex (5)
- java (3)
- apache (8)
- linux (8)
- git (5)
- web (5)
- wordpress (9)
- mongodb (2)
- redis (5)
- yaf (6)
- python (4)
- big data (1)
- sphinx (1)
- html (1)
- bootstrap (1)
- vue (1)
- laravel (1)
- test (0)
最新评论
-
July01:
推荐用StratoIO打印控件,支持网页、URL、图片、PD、 ...
如何解决非IE浏览器的web打印 -
flashbehappy:
同一个视频,有mp4,ogg两种格式的。在chrome,fir ...
firefox chrom safari 对video标签的区别 -
xmdxzyf:
可以在网站(www.sosoapi.com)上试下在线表单方式 ...
用swagger-php/ui做API测试 -
flex_莫冲:
a2631500 写道"看了源码,设置Backbon ...
backbone与php交互 -
a2631500:
"看了源码,设置Backbone.emulateJS ...
backbone与php交互
今天要在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也可以滚动。
最终代码
参考:
http://stackoverflow.com/questions/6139564/iframe-size-on-ipad
http://jsfiddle.net/CobaltBlueDW/zHR8s/
http://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute
但是若设置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
发表评论
-
来自yahoo的web优化规则(YSLOW的23条军规)
2014-09-11 17:53 1613https://developer.yahoo.com/per ... -
ga参数分析
2014-06-25 15:42 633转自http://www.lampblog.net/2011/ ... -
IE8与现代浏览器差异记录
2014-04-09 15:13 8611 不支持.trim()方法 解决方法:用$.trim();代 ... -
如何判断当前窗口是否激活
2013-10-12 17:26 5263http://stackoverflow.com/questi ... -
html5 sse 在chrome、firefox上的不同表现
2013-10-12 12:38 1230虽然两者都实现了html5 sse,但是两者处理方式是不同的。 ... -
PhoneGap3.0发布,使用全新的插件架构
2013-08-05 15:00 1020来源:http://www.newsqueue.net/n/P ... -
让老版本的IE也支持canvas的两种神器
2013-07-26 10:44 6065https://code.google.com/p/explo ... -
使用HTML5的链接预取功能给网站提速
2013-07-25 16:48 940HTML5的链接预取功能(link ... -
慎用manifest
2013-07-18 10:56 3939参考: http://mweb.baidu.com/wp-co ... -
如何让VIDEO tag取消缓存
2013-06-07 12:27 2321video的src是动态生成的。所以会有一个bug,更新了vi ... -
iscroll + sortable element
2013-05-17 20:59 1526为了在iscroll上实现sortable的效果,想了一个星期 ... -
video mediagroup属性说明
2013-05-13 10:37 972参考: http://www.w3school.com.cn/ ... -
iscroll初始化无法生成滚动条的问题解决
2013-05-10 10:20 7169究其原因是因为iscroll无法取得wrapper的offse ... -
video element in ipad safari
2013-01-11 11:10 2802video元素在ipad safari上的一些API是无法支持 ... -
app cache 在IOS6上的问题
2012-07-11 16:26 1304ios6号称将app cache从5mb提升到25mb。但是 ... -
HTML5 VIDEO
2012-07-05 17:15 6196位置: 若放一个div或图片在html5的video元素的 ... -
icenium使用心得
2012-06-19 12:03 3986icenium包含以下三个 ... -
获取屏幕宽度和高度
2012-05-15 10:06 2648在android上的浏览器有个设置远近的功能,导致获取到的屏幕 ... -
html5 全屏api
2012-05-09 17:14 1877【进入和退出全屏】 // ... -
html5的离线存储applicationCache应用
2012-05-03 15:26 5592需要注意几点: 1、可 ...
相关推荐
Open IFrame In News Table 一款Chrome扩展插件,通过该插件可以右键将网页嵌入的 IFrame 框架 快速使用 新tab 页签打开。
最近做的合作网站嵌入到对方的iframe中去,在safari,opera和有些版本的搜狗浏览器(内核版本原因)中不能读到cookie。
解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题
因为有一个项目要用到iframe自适应高度,网上搜索了以下结果无数,不过看来看去都是那...iframe自适应高度,亲测完美兼容IE6_7_8_9,Chrome谷歌浏览器,Opera欧朋浏览器,FireFox火狐浏览器,Mac Safari浏览器等五大浏览器
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
js控制/获取a.html中iframe加载的b.html中的iframe,很多人都以为getElementById可以直接获取,其实不行的,以上代码就解决了这个问题,js控制iframe加载页面的iframe,不过测试只在IE和火狐通过,谷歌不行,其他自...
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
解决iframe跨域消息传递的问题,并且可以多个iframe间进行消息传递
iframe 跨域访问session问题解决方法
iframe框架\JS获取iframe元素
iframe详细用法iframe详细用法iframe详细用法iframe详细用法iframe详细用法
就想弄一个winform结合html5的一个小东西,突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法,一起看看吧
iframe自适应高度和宽度
iframe for flex!iframe for flex!iframe for flex!iframe for flex!iframe for flex!iframe for flex!
IFrame中Session丢失的解决办法
外部滚动条控制iframe外部滚动条控制iframe
以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的...