如何检查HTML5应用程序是否有效

Question

我有一个要求，我可以在页面上添加Flash和嵌入HTML5应用程序。但是HTML5应用程序在许多浏览器上不受支持。我想做的是在运行时检查HTML5应用程序是否无法正常工作，然后显示Flash文件。但是我不知道如何在运行时检查我的应用程序是否显示任何内容。我通过以下代码在用户控件中嵌入了HTML5代码：

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

Answer 1

在运行时检查支持的功能的过程通常称为"功能检测"。Modernizr 是一个流行的 JavaScript 库，它提供了这样的"功能检测"： http://modernizr.com/

例如，让我们从您建议的 HTML 开始，并为方便起见添加一个 id 属性：

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

例如，如果你想使用HTML5 Canvas，但不得不在非Canvas浏览器中回退到Flash替代品，你可以做这样的事情（在JavaScript中，使用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涵盖了大量的功能。所需的精确"检测"将根据您的要求而有所不同，但 Modernizr 使大部分工作变得非常简单。