现在的位置: 主页 > 主打产品 > 文章列表

HTML5 Canva浏览器兼容检查

作者:合肥瑶海区海美电器服务部 来源:www.an128l.com 未知发布时间:2017-09-02 11:42:39
HTML5 Canva浏览器兼容检查 【问题描述】不是所有的浏览器都支持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("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);

}

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 运行效果:

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:潜江SEO http://qianjiang.4567w.com

上一篇:卡汀财经—CFA (特许金融分析师)简介 下一篇:最后一页