HTML5 Canva浏览器兼容检查
来源:互联网 发布:debian stretch软件源 编辑:程序博客网 时间:2024/05/21 20:27
【问题描述】不是所有的浏览器都支持HTML5。编写Web代码时,若使用了HTML5元素,在不支持HTML5的浏览器中,可能会出现兼容性的问题,如页面显示混乱。为此有必要对不支持HTML5的浏览器做相应的处理。
【解析】
其实很简单,在<body> onLoad方法中引用下述方法即可:
function supports_canvas() { if(!!document.createElement('canvas').getContext) { } else { document.getElementById("html5_warnning").innerHTML = "本演示采用HTML5编写。您的浏览器不支持HTML 5,请更换浏览器,推荐使用Chrome!"; document.getElementById("demo").style.display = "none"; }}
body中引用示例
<body class="main_body" onLoad="supports_canvas();">
else子句中的内容可替换为兼容性的代码。
【示例效果】
【实例】
在网上看到一个很有爱的例子,示例的运行效果如下(修改过的版本):
有一点美中不足,那就是这个代码是基于HTML5写的,有些浏览器不支持。利用上述方法进行改进:
加入如下代码:
if(!document.createElement('canvas').getContext) {var msg = document.createElement("div");msg.id = "errorMsg";msg.innerHTML = "你的浏览器落伍了!<br/>亲爱的,请使用 <a href=\"http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN\" target=\"_blank\">Chrome</a>浏览器!";document.body.appendChild(msg);}
IE8 运行效果:
点击链接可跳转至Chrome下载页面。
【实例链接】
1 http://love.peterchou139.com/2012-2-14
2 http://love.peterchou139.com/
注:需支持HTML5的浏览器才能查看!
【其他】
注意用支持HTML5的浏览器才能看到效果,呵呵。
1 http://love.hackerzhou.me/
2 http://www.oschina.net/news/25769/10-html5-canvas-examples-for-valentines-day
转载请标明出处,仅供学习交流,勿用于商业目的
Copyright @ http://blog.csdn.net/tandesir
- HTML5 Canva浏览器兼容检查
- Html5 canva画图
- 基于VML与HTML5 Canva实现的跨浏览器饼图与折线图
- 让IE浏览器兼容HTML5
- html5兼容低版本浏览器
- HTML5-webSocket兼容低浏览器
- HTML5 video 跨浏览器兼容的方法
- 让IE低版本浏览器兼容HTML5
- 让IE低版本浏览器兼容HTML5
- HTML5 video 跨浏览器兼容的方法
- HTML5 video 跨浏览器兼容的方法
- html5 progress标签样式(各浏览器兼容)
- html5 兼容旧浏览器一例
- IE9 以下版本浏览器兼容html5
- HTML5第一阶段(第九章浏览器兼容)
- 让不支持HTML5的老浏览器 “兼容”HTML5
- 使用jTopo给Html5 Canva中的元素添加鼠标事件
- 各大浏览器 CSS3 和 HTML5 兼容速查表
- eclipse 添加任务标记
- You do not have a license for this Vuser type问题
- Javascript异步编程的4种方法
- oracle 创建用户需知
- OPENTSDB 安装与运行
- HTML5 Canva浏览器兼容检查
- python egg 文件安装与制作
- android hander timer
- jquery获取浏览器、文档高度、宽度
- 如何做好一名软件开发团队的领导者
- [Java] Java Zip文件压缩与解压缩
- 电子商务全球化标准:ebXML
- 淘宝开放平台.NET版SDK top4net
- mysql索引结构原理