检测浏览器是否支持Polymer技术

Question

检测浏览器是否支持Polymer技术

cross-browserpolymer

9

我在一个网站上使用Polymer（版本0.5，可能会在某个时候升级到1.0）。显然，许多旧版浏览器与Polyfills不兼容。

有没有一种方法可以测试特定浏览器中的polyfills是否成功？因此，在完成Polyfill后，是否有一些函数、对象、变量或其他任何东西可以检查Polyfills是否起作用？

我想能够检测失败，然后重定向到一个带有“请升级”消息的页面。

对我来说唯一的替代方案是在我的后端实现一些浏览器检测中间件，但由于各种内部原因（以及这意味着特别列出白名单/黑名单浏览器列表，这将很快变得繁琐），我更喜欢避免这种情况。

提前感谢。

- Andre

很多人一直在要求这个。我预计它会在不久的将来出现。 - Kyle Horkley

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- OddDev · Accepted Answer

简短回答：

快速测试：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导入

自定义元素

Shadow DOM

这些功能必须得到支持：

http://www.html5rocks.com/en/tutorials/webcomponents/template/

function supportsTemplate() {
  return 'content' in document.createElement('template');
}

if (supportsTemplate()) {
  // Good to go!
} else {
  // Use old templating techniques or libraries.
}

https://www.polymer-project.org/0.5/platform/html-imports.html

function supportsImports() {
  return 'import' in document.createElement('link');
}

if (supportsImports()) {
  // Good to go!
} else {
  // Use other libraries/require systems to load files.
}

https://www.polymer-project.org/0.5/platform/custom-elements.html

function supportsCustomElements() {
  return 'registerElement' in document;
}

if (supportsCustomElements()) {
  // Good to go!
} else {
  // Use other libraries to create components.
}

https://www.polymer-project.org/0.5/platform/shadow-dom.html

如何检查浏览器是否支持影子DOM

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.
 }

以下是来自https://github.com/WebComponents/webcomponentsjs#browser-support的当前矩阵：

<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>

这也许会很有趣： https://github.com/webcomponents/webcomponentsjs/issues/26