我如何检查当前浏览器是否支持Polymer(JS或HTML代码)?
快速测试:Firefox 38.0.5 显示 "No",而 Chrome 44.0.2403.130 m 显示 "Yes"
function supportsPolymer() {
return 'content' in document.createElement('template') && 'import' in document.createElement('link') && 'registerElement' in document && document.head.createShadowRoot;
}
if(supportsPolymer()) {
//Good to go
alert("Yes");
} else {
//Is not supported
alert("No");
}
您需要查看Polymer网站上的此列表。
- 模板
- HTML导入
- 自定义元素
- 影子DOM
必须支持这些特性:
function supportsTemplate() {
return 'content' in document.createElement('template');
}
if (supportsTemplate()) {
// Good to go!
} else {
// Use old templating techniques or libraries.
}
function supportsImports() {
return 'import' in document.createElement('link');
}
if (supportsImports()) {
// Good to go!
} else {
// Use other libraries/require systems to load files.
}
function supportsCustomElements() {
return 'registerElement' in document;
}
if (supportsCustomElements()) {
// Good to go!
} else {
// Use other libraries to create components.
}
if(document.head.createShadowRoot) {
// I can shadow DOM
} else {
// I can't
}
在一个函数中:
function supportsShadowDom() {
return document.head.createShadowRoot;
}
以下是类似之前代码片段的未经测试版本:
function supportsShadowDom() {
return 'createShadowRoot' in document;
}
if (supportsCustomElements() && supportsTemplate() && supportsImports() && supportsShadowDom()) {
// Good to go!
} else {
// Use other libraries to create components.
}
<table><thead>
<tr>
<th>Polyfill</th>
<th align="center">IE10</th>
<th align="center">IE11+</th>
<th align="center">Chrome*</th>
<th align="center">Firefox*</th>
<th align="center">Safari 7+*</th>
<th align="center">Chrome Android*</th>
<th align="center">Mobile Safari*</th>
</tr>
</thead><tbody>
<tr>
<td>Custom Elements</td>
<td align="center">~</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
</tr>
<tr>
<td>HTML Imports</td>
<td align="center">~</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
</tr>
<tr>
<td>Shadow DOM</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
</tr>
<tr>
<td>Templates</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
</tr>
</tbody></table>