HTML5 Canva浏览器兼容检查
【解析】
其实很简单，在body> onLoad方法中引用下述方法即可：
[html]
function supports_canvas() {
if(!!document.createElement('canvas').getContext)
{
}
else
{
document.getElementById("html5_warnning").innerHTML = "本演示采用HTML5编写。您的浏览器不支持html 5,请更换浏览器，推荐使用Chrome！";
document.getElementById("demo").style.display = "none";
}
}
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中引用示例
[html]
body class="main_body" onLoad="supports_canvas(); ">
body class="main_body" onLoad="supports_canvas(); "> else子句中的内容可替换为兼容性的代码。
【示例效果】
【实例】
在网上看到一个很有爱的例子，示例的运行效果如下（修改过的版本）：
有一点美中不足，那就是这个代码是基于HTML5写的，有些浏览器不支持。利用上述方法进行改进：
加入如下代码：
[html]
if(!document.createElement('canvas').getContext) {
VAR msg = document.createElement("p");
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);
}
if(!document.createElement('canvas').getContext) {
var msg = document.createElement("p");
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 运行效果：
【问题描述】不是所有的浏览器都支持HTML5。编写Web代码时，若使用了HTML5元素，在不支持HTML5的浏览器中，可能会出现兼容性的问题，如页面显示混乱。为此有必要对不支持HTML5的浏览器做相应的处理。
【解析】
其实很简单，在body> onLoad方法中引用下述方法即可：
[html]
function supports_canvas() {
if(!!document.createElement('canvas').getContext)
{
}
else
{
document.getElementById("html5_warnning").innerHTML = "本演示采用HTML5编写。您的浏览器不支持HTML 5,请更换浏览器，推荐使用Chrome！";
document.getElementById("demo").style.display = "none";
}
}
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中引用示例
[html]
body class="main_body" onLoad="supports_canvas(); ">
body class="main_body" onLoad="supports_canvas(); "> else子句中的内容可替换为兼容性的代码。
【示例效果】
【实例】
在网上看到一个很有爱的例子，示例的运行效果如下（修改过的版本）：
有一点美中不足，那就是这个代码是基于HTML5写的，有些浏览器不支持。利用上述方法进行改进：
加入如下代码：
[html]
if(!document.createElement('canvas').getContext) {
var msg = document.createElement("p");
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);
}
if(!document.createElement('canvas').getContext) {
var msg = document.createElement("p");
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 运行效果：
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5 Canva浏览器兼容检查
本文地址： https://pptw.com/jishu/586422.html