如何检查HTML5应用是否正常？

Question

I have a requirement where I can add both flash and embed HTML5 app on page. But HTML5 app is not supported on many browsers. What I want to do is to check at runtime if the HTML5 app is not working fine, then show Flash File . But I don't know how can I check at run time whether my app is displaying anything or not. I have embedded the HTML5 code through following code in user-control:

<embed src='<fully qualified html5 app link>' height="<height>" width="<width>" />

Answer 1

The process of checking for supported functionality at runtime is often referred as "feature detection". Modernizr is one popular JavaScript library that provides such "feature detects": http://modernizr.com/

For example, let's start with the HTML you suggested, and add an id attribute for convenience:

<embed id="fancy" height="<height>" width="<width>" />

If you wanted to use HTML5 Canvas, for example, but had to fall back to a Flash alternative in non-Canvas browsers, you could do something like this (in JavaScript, with Modernizr):

if (Modernizr.canvas) {
    // TODO: do whatever it is you want to do with Canvas
} else {
    // hook up your embed to the fallback Flash component
    document.getElementById('fancy').src = 'url/for/flash/component.swf';
}

HTML5 covers loads of functionality. The precise "detect" required will vary based on your requirements, but Modernizr makes most of this quite simple.