html5
关注
分享
扫一扫
莫冲
TO Be SIMPLE & STUDPID
展开
-
iscroll介绍
参考 http://hi.baidu.com/xiaowuphp/blog/item/8ca07e000e6cbc94d43f7cc2.htmliscroll是什么？iscroll.js是Matteo Spinelli开发的一个js文件，使用原生js编写，不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题，兼容mobile safari、android默认浏览器、safar原创 2017-03-28 14:06:39 · 381 阅读 · 0 评论 -
如何让VIDEO tag取消缓存
video的src是动态生成的。所以会有一个bug，更新了video的src的赋值，依然是播放之前的那个地址。问题：video缓存解决：给video的src地址加上?t=random参数。random是动态值。如php的time()等都可以。参考：http://stackoverflow.com/questions/10699857/video-tag-html5-ca...原创 2013-06-07 12:27:26 · 956 阅读 · 0 评论 -
iscroll + sortable element
为了在iscroll上实现sortable的效果，想了一个星期。用iscroll+jquery ui sortable插件，虽然可行但是存在一大堆问题。要是自己实现，难度也不小。晚上google了一下竟然发现了demo。实在太有爱了。demo：http://users.on.net/~mikeandgeminoz/code/scroll4/原文；http://www.brownie...原创 2013-05-17 20:59:32 · 119 阅读 · 0 评论 -
video mediagroup属性说明
参考：http://www.w3school.com.cn/html5/av_prop_mediagroup.asp这个属性很少用。但是若用了会有个问题，播放完成后再次播放就无效了。若设置了loop属性也会无效。所以如果只有一个视频就不要用这个属性了。纯粹多余。...原创 2013-05-13 10:37:56 · 300 阅读 · 0 评论 -
iscroll初始化无法生成滚动条的问题解决
究其原因是因为iscroll无法取得wrapper的offsetHeight的值。而导致无法取得的原因一个是因为DOM未加载完，自然取不到。这个可以通过在firebug中执行console.log(wrapper.offsetHeight);察看是否能取得值。若能取到说明firebug能取到。而在初始化取不到就是时机的问题。若figbug的控制台依然取不到值，则说明offsetHeig...原创 2013-05-10 10:20:03 · 326 阅读 · 0 评论 -
app cache 在IOS6上的问题
ios6号称将app cache从5mb提升到25mb。但是其实ios5虽然默认5mb，但是也是可以允许最高提升到50MB的。而ios6在app cache的时候不会提示，反而会在progress到一半的时候卡住不动了，也不会报error。这真是还不如ios5呢。 附上IOS6的更新内容 OS6发布了beta版，其中包括了新版的Safari浏览器，增强了对HTML5的支持，...2012-07-11 16:26:10 · 89 阅读 · 0 评论 -
HTML5 VIDEO
位置：若放一个div或图片在html5的video元素的位置上，在win，ipad，android上是有区别的ipad上video位置上无论放什么都是无法监听到事件的。android和window是是可以监听到的。 视频格式：都支持mp4格式，但是必须是h264 code，否则也是不支持的。遇到一个video，在ipad上是不能播放的，而在android上可以播放，但...2012-07-05 17:15:21 · 121 阅读 · 0 评论 -
html5的离线存储applicationCache在ipod上有问题
html5的离线存储applicationCache在ipod上无法检测到updateready状态。导致不能更新缓存数据。在pc上监听checking状态，若noupdate，则不会执行downloading。而在ipod上无论是否更新都会执行downloading。但是不会执行updateready。这是为什么呢？是否是因为ipod上的缓存存储空间不足，一直download不下来，导致...原创 2012-02-17 17:19:41 · 103 阅读 · 0 评论 -
icenium使用心得
icenium包含以下三个内容：graphite：安装在windows环境（无mac）下的开发环境。项目保存在云端。mist：基于浏览器的开发环境lon：iphone，ipad的测试工具，可在app store免费下载。无android版本 1、graphite无法输入中文，只能粘帖。HTML文件和JS文件都是。MIST WEB上可以输入中文。2、http://app...原创 2012-06-19 12:03:01 · 111 阅读 · 0 评论 -
iframe in ipad safari
今天要在web中嵌套一个网址或本地HTML，用到了iframe，在电脑上设置scrolling=‘auto’，宽度高度，会有滚动条出现。而在ipad上会全部显示整个网页的宽度高度。scrolling属性无效。原来在html5中的iframe已经只有剩下src的属性。但是若设置scrolling=‘no’.还是会生效的。页面只显示定义的高度和宽度的大小。设置overflow:hidden都没用。...原创 2013-01-08 16:11:37 · 249 阅读 · 0 评论 -
video element in ipad safari
video元素在ipad safari上的一些API是无法支持的。比如通过JS代码控制全屏。我的要求是，页面上只有一个按钮，看不到视频元素，点击该按钮，全屏显示并播放视频，退出视频全屏后也是看不到视频元素的。那么首先video元素是隐藏的。$(video).css({'visibility' : 'hidden', 'display' : 'none'});按钮元素的 HTML ...原创 2013-01-11 11:10:39 · 161 阅读 · 0 评论 -
IE8与现代浏览器差异记录
1 不支持.trim()方法解决方法：用$.trim();代替参考http://blog.xxbar.net/2014/02/ie8stringtrim23504.html2 a元素的位置和button的位置有高低区别。如果你使用了bootstrap的话，做个button group的页面按钮组，你参考bootstrap示例创建1个button，一个a class='btn...原创 2014-04-09 15:13:45 · 156 阅读 · 0 评论 -
如何判断当前窗口是否激活
http://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active[code="java"]Current browser support:Chrome 13Internet Explorer 10Firefox 1...原创 2013-10-12 17:26:43 · 1296 阅读 · 0 评论 -
html5 sse 在chrome、firefox上的不同表现
虽然两者都实现了html5 sse，但是两者处理方式是不同的。若在服务器端处理的时候。若没有返回数据，在FF下会中断SSE连接，并且都不会在连接上了。[code="java"]public function sse_connect() { header('Content-Type: text/event-stream'); header('Cache-Control...原创 2013-10-12 12:38:12 · 558 阅读 · 0 评论 -
ga参数分析
转自http://www.lampblog.net/2011/06/__utm-gif%E7%9A%84%E8%AF%A6%E7%BB%86%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E/今天做google-analytics备份：在本地保存数据副本,对GA的cookie,数据传输请求__utm.gif做了详细的了解，GA的cookie详解网上说得比较多，就不说了...原创 2014-06-25 15:42:24 · 425 阅读 · 0 评论 -
PhoneGap3.0发布，使用全新的插件架构
来源：http://www.newsqueue.net/n/PhoneGap30-release-use-the-new-plug-in-architecture今天在 PhoneGap Day 会议上 PhoneGap 发布了 3.0 版本，该版本对底层架构进行了全面显著的改进，还包括其他方面的改进。首先，你可以先阅读以下链接：Adobe PhoneGap 3.0 Release...原创 2013-08-05 15:00:00 · 111 阅读 · 0 评论 -
让老版本的IE也支持canvas的两种神器
https://code.google.com/p/explorercanvas/downloads/detail?name=excanvas_r3.zip&can=2&q=第一种explorecanvas只要多引入这个js包就可以支持了第二种 google chrome frame开发者指南：http://www.chromium.org/developers/h...原创 2013-07-26 10:44:53 · 548 阅读 · 0 评论 -
使用HTML5的链接预取功能给网站提速
HTML5的链接预取功能(link prefetching)是一个埋在沙里的宝石，至今还很少人知道它的价值。 你可能已经知道了那古老而又闻名的图片预加载功能，链接预取功能就是将此概念由图片扩展到了网页内容（不需要任何AJAX代码）。它是这样工作的：在页面上添加一个像这样的链接：这样，当你的机器空闲时，浏览器就会自动的在后台把page2.html下载下来。 当用户最终点击了p...原创 2013-07-25 16:48:26 · 116 阅读 · 0 评论 -
慎用manifest
参考：http://mweb.baidu.com/wp-content/uploads/2013/01/%E6%85%8E%E7%94%A8manifest.pdfhttp://www.cnblogs.com/_franky/archive/2012/11/23/2783947.htmlmanifest缓存本来想用manifest来缓存固定的一些CSS和JS文件，已经实现了缓存。但...原创 2013-07-18 10:56:04 · 268 阅读 · 0 评论 -
移动web获取image的实际宽高的问题
移动设备如ipad，android手机，ipod等，通过imgCopy = new Image();imgCopy.onload = getSize;imgCopy.src = image.src;来获取image的宽高。在电脑上OK但是在移动设备上宽高会变成一半。最好自己乘上2.或者指定实际宽高。//强制图片的宽高。否则会根据实际设备缩放。imgCopy.width = ...原创 2012-02-15 16:38:45 · 196 阅读 · 0 评论 -
ipad2的浏览器报js execute timeout的错误
iPhone javascript execution exceeded timeoutPosted on July 6th, 2011Wow. I know that Apple severely cripples their phones, under clocking their processors, etc. I know that the iPhone 3G I have fo...原创 2012-02-13 12:25:10 · 150 阅读 · 0 评论 -
CORS 远程请求
不同域的远程访问之前是用jsonp，但是只能支持get请求，而且写法也很恶心。现在HTML5都来了，应该优先用CORS前端请求代码function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { // 此时即原创 2017-03-28 14:29:45 · 305 阅读 · 0 评论 -
app cache 在IOS6上的问题
ios6号称将app cache从5mb提升到25mb。但是其实ios5虽然默认5mb，但是也是可以允许最高提升到50MB的。而ios6在app cache的时候不会提示，反而会在progress到一半的时候卡住不动了，也不会报error。这真是还不如ios5呢。 附上IOS6的更新内容 OS6发布了beta版，其中包括了新版的Safari浏览器，增强了对HTML5的支持，我原创 2017-03-28 14:11:38 · 253 阅读 · 0 评论 -
HTML5 VIDEO
位置：若放一个div或图片在html5的video元素的位置上，在win，ipad，android上是有区别的ipad上video位置上无论放什么都是无法监听到事件的。android和window是是可以监听到的。 视频格式：都支持mp4格式，但是必须是h264 code，否则也是不支持的。遇到一个video，在ipad上是不能播放的，而在android上可以播放，但是原创 2017-03-28 14:11:22 · 235 阅读 · 0 评论 -
获取屏幕宽度和高度
在android上的浏览器有个设置远近的功能，导致获取到的屏幕宽度和高度是会根据设置远近而变化的。但是有个属性不论如何设置都是不变的。就是屏幕的宽度和高度。var screenW = window.outerWidth ;var screenH = window.outerHeight; $("#msg").text("width:"+screenW+";height:"+screenH原创 2017-03-28 14:10:52 · 366 阅读 · 0 评论 -
html5的离线存储applicationCache应用
需要注意几点：1、可以通过iframe嵌入多个manifest文件。主页不需要配置manifest，这样index.html就不会被缓存。 2、多个manifest文件还是会有空间的限制，在ipad的safari上不能超过50M。若cache1.manfest是26M，cache1.manfest是27M，则2个加起来超过50m原创 2017-03-28 14:10:23 · 287 阅读 · 0 评论 -
html5的离线存储applicationCache在ipod上有问题
html5的离线存储applicationCache在ipod上无法检测到updateready状态。导致不能更新缓存数据。在pc上监听checking状态，若noupdate，则不会执行downloading。而在ipod上无论是否更新都会执行downloading。但是不会执行updateready。这是为什么呢？是否是因为ipod上的缓存存储空间不足，一直download不下来，导致没有原创 2017-03-28 14:09:18 · 257 阅读 · 0 评论 -
移动web获取image的实际宽高的问题
移动设备如ipad，android手机，ipod等，通过imgCopy = new Image();imgCopy.onload = getSize;imgCopy.src = image.src;来获取image的宽高。在电脑上OK但是在移动设备上宽高会变成一半。最好自己乘上2.或者指定实际宽高。//强制图片的宽高。否则会根据实际设备缩放。imgCopy.width = 3309;原创 2017-03-28 14:09:09 · 442 阅读 · 0 评论 -
ipad2的浏览器报js execute timeout的错误
iPhone javascript execution exceeded timeoutPosted on July 6th, 2011Wow. I know that Apple severely cripples their phones, under clocking their processors, etc. I know that the iPhone 3G I have for原创 2017-03-28 14:09:00 · 334 阅读 · 0 评论 -
解决浏览器同源策略导致的getImageData错误
在本机测试HTML5 Canvas程序的时候，如果用context.drawImage()后再用context.getImageData()获取图片像素数据的时候会抛出错：SECURITY_ERR: DOM Exception 18。这是Javascript同源策略（Same origin policy）造成的。目前发现这个问题在Firefox和Chrome中均存在。解决办法如下：Fi...原创 2011-10-27 17:07:43 · 1271 阅读 · 0 评论 -
video等元素实现全屏控制
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/html5 video 实现全屏控制原创 2012-01-05 10:55:32 · 701 阅读 · 0 评论 -
关于HTML5中Canvas的宽、高设置问题
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法：方法一：1 方法二：使用HTML5 Canvas API操作 OK1 var canvas = document.getElementById('欲操作canvas的id');2 canvas.width = 500;3 canvas.width = 500;若通过如下方法设置宽高，那么...原创 2011-11-29 16:52:26 · 868 阅读 · 0 评论 -
ipad上的html video自定义播放暂停控制有问题
ipad上的safari运行html5的video标签。若使用自定义的button控制video的播放和暂停，在pc上没问题但是在ipad上，播放一会就会自动暂停。apple提供的video demo也只是在pc上实现播放暂停而没有在ipad上实现。...原创 2011-11-14 17:36:22 · 387 阅读 · 0 评论 -
firefox chrom safari 对video标签的区别
在这个有关视频的快速技巧里，我们将探讨如何在项目中使用 HTML5 video 标签。由于旧的浏览器和 Internet Explorer 不支持 元素，我们必须为这些浏览器找到一个支持 Flash 文件的解决方案。不幸的是，和 HTML5 音频一样，涉及到视频的文件格式，Firefox 和 Safari/Chrome 的支持方式并不相同。因此，如果你想在这个时候使用 HTML5 视频，则需...原创 2011-11-14 16:06:39 · 289 阅读 · 0 评论 -
获取屏幕宽度和高度
在android上的浏览器有个设置远近的功能，导致获取到的屏幕宽度和高度是会根据设置远近而变化的。但是有个属性不论如何设置都是不变的。就是屏幕的宽度和高度。var screenW = window.outerWidth ;var screenH = window.outerHeight; $("#msg").text("width:"+screenW+";height:"+scree...原创 2012-05-15 10:06:30 · 228 阅读 · 0 评论 -
html5 全屏api
【进入和退出全屏】// Webkit (works in Safari5.1 and Chrome 15)element.webkitRequestFullScreen();document.webkitCancelFullScreen(); // Firefox 10element.mozRequestFullScreen();doc...原创 2012-05-09 17:14:21 · 86 阅读 · 0 评论 -
iscroll介绍
参考 http://hi.baidu.com/xiaowuphp/blog/item/8ca07e000e6cbc94d43f7cc2.htmliscroll是什么？iscroll.js是Matteo Spinelli开发的一个js文件，使用原生js编写，不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题，兼容mobile safari、android默认浏览器、sa...原创 2011-11-07 16:53:40 · 80 阅读 · 0 评论 -
html5的离线存储applicationCache应用
需要注意几点：1、可以通过iframe嵌入多个manifest文件。主页不需要配置manifest，这样index.html就不会被缓存。 2、多个manifest文件还是会有空间的限制，在ipad的safari上不能超过50M。若cache1.manfest是26M，cache1.manfest是27M，则2个...原创 2012-05-03 15:26:39 · 104 阅读 · 0 评论 -
chrome对svg的缩放有bug
http://groups.google.com/group/google-chrome-frame/browse_thread/thread/8b32568e6cf93452/ed2a45ac49ee9833?#ed2a45ac49ee9833svgRoot.currentScale * 0.67;这样直接在js中操作是无效的。若放在svg标签里面的，则生效。demohttp:/...原创 2012-01-12 14:28:38 · 285 阅读 · 0 评论 -
来自yahoo的web优化规则（YSLOW的23条军规）
https://developer.yahoo.com/performance/rules.html认真研究下。收货不少原创 2014-09-11 17:53:28 · 249 阅读 · 0 评论