[Problem description] Not all browsers support HTML5. When writing Web code, if HTML5 elements are used, compatibility issues may occur in browsers that do not support HTML5, such as page display confusion. Therefore, it is necessary to handle browsers that do not support HTML5. [Resolution] is actually very simple. You can reference the following method in the <body> onLoad method: [html] function supports_canvas () {if (!! Document. createElement ('canvas '). getContext) {} else {document. getElementById ("html5_warnning"). innerHTML = "this demo is written in HTML5. Your browser does not support HTML 5. Please change your browser. Chrome is recommended! "; Document. getElementById (" demo "). style. display =" none ";}} function supports_canvas () {if (!! Document. createElement ('canvas '). getContext) {} else {document. getElementById ("html5_warnning"). innerHTML = "this demo is written in HTML5. Your browser does not support HTML 5. Please change your browser. Chrome is recommended! "; Document. getElementById ("demo "). style. display = "none" ;}} reference example [html] <body class = "main_body" onLoad = "supports_canvas (); "> <body class =" main_body "onLoad =" supports_canvas (); "> the content in the else clause can be replaced with the compatible code. [Example effect] [Example] I can see a very loving example on the Internet. The running effect of the example is as follows (the modified version): It is a bit of a weakness, that is, this code is written based on HTML5, which is not supported by some browsers. Use the above method for improvement: Add the following code: [html] if (! Document. createElement ('canvas '). getContext) {var msg = document. createElement ("div"); msg. id = "errorMsg"; msg. innerHTML = "your browser is outdated! <Br/> dear, please use <a href = \" http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN \ "Target = \" _ blank \ "> Chrome </a> browser! "; Document. body. appendChild (msg);} if (! Document. createElement ('canvas '). getContext) {var msg = document. createElement ("div"); msg. id = "errorMsg"; msg. innerHTML = "your browser is outdated! <Br/> dear, please use <a href = \" http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN \ "Target = \" _ blank \ "> Chrome </a> browser! "; Document. body. appendChild (msg);} IE8 running effect:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
