如何检查是否浏览器支持聚合物？ [英] How to check if a browser supports Polymer?

查看：140
本文介绍了如何检查是否浏览器支持聚合物？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我如何能够检查（JS或HTML code）聚合物是否由当前的浏览器支持或不支持？


解决方案

简短的回答：

的快速测试：火狐38.0.5警报否，而Chrome的44.0.2403.130 m个警报是的

\r
\r

函数supportsPolymer（）{\r
  在使用document.createElement返回内容（模板）及和放大器;在使用document.createElement进口（链接）及和放大器; ＆安培;文件和放大器'registerElement'; document.head.createShadowRoot;\r
}\r
\r
如果（supportsPolymer（））{\r
  \r
  //好去\r
  警报（是）;\r
  \r
}其他{\r
  \r
  //不支持\r
  警报（否）;\r
  \r
}

\r

\r
\r

详细的回答：

您已经检查高分子网站这个列表。


  

      
  • 模板

    •   
  • HTML进口

    •   
  • 自定义元素

    •   
  • 暗影DOM

    •   

这些功能必须支持的：


 函数supportsTemplate（）{
  在使用document.createElement（'模板'）返回'内容';
}如果（supportsTemplate（））{
  //好走！
}其他{
  //使用旧模板技术或库。
}
 



 函数supportsImports（）{
  在使用document.createElement（'链接'）返回'进口';
}如果（supportsImports（））{
  //好走！
}其他{
  //使用其他库/要求系统加载文件。
}
 



 函数supportsCustomElements（）{
  在文档返回'registerElement';
}如果（supportsCustomElements（））{
  //好走！
}其他{
  //使用其他库创建的组件。
}


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


 如果（document.head.createShadowRoot）{
    //我的影子DOM
}其他{
    //我不能
}


在一个函数：

 函数supportsShadowDom（）{
   返回document.head.createShadowRoot;
 }

未测试版本在previous片段的风格：

 函数supportsShadowDom（）{
   在文档返回'createShadowRoot';
 }

好吧，你已经实现了每一个功能之后就可以做这样的事情：

 如果（supportsCustomElements（）及和放大器; supportsTemplate（）及和放大器; supportsImports（）及和放大器; supportsShadowDom（））{
   //好走！
 }其他{
   //使用其他库创建的组件。
 }

这是从当前矩阵<一href=\"https://github.com/WebComponents/webcomponentsjs#browser-support\">https://github.com/WebComponents/webcomponentsjs#browser-support:

\r
\r

＆LT;表＆gt;＆LT;＆THEAD GT;\r
＆所述; TR＆GT;\r
＆LT;第i填充工具＆LT; /第i\r
百分位ALIGN =中心＆GT;＆IE10 LT; /第i\r
百分位ALIGN =中心＆GT; IE11 + LT; /第i\r
百分位ALIGN =中心＆GT;铬* LT; /第i\r
百分位ALIGN =中心＆GT;火狐* LT; /第i\r
百分位ALIGN =中心＆GT;野生动物园7 + * LT; /第i\r
百分位ALIGN =中心＆GT;镀铬的Andr​​oid * LT; /第i\r
百分位ALIGN =中心＆GT;移动Safari浏览器* LT; /第i\r
＆LT; / TR＆GT;\r
＆LT; / THEAD＆GT;＆LT;＆TBODY GT;\r
＆所述; TR＆GT;\r
＆LT; TD＆GT;自定义元素＆lt; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;＆〜LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR＆GT;\r
＆LT; TD＆GT;进口HTML LT＆; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;＆〜LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR＆GT;\r
＆LT; TD＆GT;影子DOM＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR＆GT;\r
＆LT; TD＆GT;模板和LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; TD ALIGN =中心＆GT;✓＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;＆LT; /表＆gt;

\r

\r
\r

这可能是有趣的，太：
<一href=\"https://github.com/webcomponents/webcomponentsjs/issues/26\">https://github.com/webcomponents/webcomponentsjs/issues/26

How am I able to check (JS or HTML code) whether Polymer is supported by the current browser or not?

解决方案

Short answer:

Quick test: Firefox 38.0.5 alerts "No", while Chrome 44.0.2403.130 m alerts "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");
  
}

Detailed answer:

You've to check this list on Polymer's website.

  • Template
  • HTML Imports
  • Custom Elements
  • Shadow DOM

These features have to be supported:

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

How to check if a browser supports shadow DOM

if(document.head.createShadowRoot) {
    // I can shadow DOM
} else {
    // I can't
}

In a function: 

 function supportsShadowDom() {
   return document.head.createShadowRoot;
 }

Untested version in the style of the previous snippets:

 function supportsShadowDom() {
   return 'createShadowRoot' in document;
 }

Okay, after you've implemented every function you can do something like this: 

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

This is the current matrix from 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>

This may be interesting, too: https://github.com/webcomponents/webcomponentsjs/issues/26

这篇关于如何检查是否浏览器支持聚合物？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆