我如何检查(JS或HTML代码)当前浏览器是否支持Polymer?
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"); }
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.