Check if html element is supported
How to check if html element is supported, datalist for example? MDC says it开发者_Go百科 is supoorted only in Opera and FireFox.
if ('options' in document.createElement('datalist')) {
// supported!
}
http://diveintohtml5.info/everything.html#datalist
If someone needs to check for support of other HTML5 elements this could also be used.
https://github.com/ryanmorr/is-element-supported
From http://ryanmorr.com/determine-html5-element-support-in-javascript/
/*
* isElementSupported
* Feature test HTML element support
* @param {String} tag
* @return {Boolean|Undefined}
*/
(function(win){
'use strict';
var toString = {}.toString;
win.isElementSupported = function isElementSupported(tag) {
// Return undefined if `HTMLUnknownElement` interface
// doesn't exist
if (!win.HTMLUnknownElement) {
return undefined;
}
// Create a test element for the tag
var element = document.createElement(tag);
// Check for support of custom elements registered via
// `document.registerElement`
if (tag.indexOf('-') > -1) {
// Registered elements have their own constructor, while unregistered
// ones use the `HTMLElement` or `HTMLUnknownElement` (if invalid name)
// constructor (http://stackoverflow.com/a/28210364/1070244)
return (
element.constructor !== window.HTMLUnknownElement &&
element.constructor !== window.HTMLElement
);
}
// Obtain the element's internal [[Class]] property, if it doesn't
// match the `HTMLUnknownElement` interface than it must be supported
return toString.call(element) !== '[object HTMLUnknownElement]';
};
})(this);
Check if the browser support the HTMLDataListElement interface:
if(typeof HTMLDataListElement === 'function') {
// your code here
} else {
// your code here if this feature is not supported
}
This should works, including elements that become HTMLElement
rather than HTML{Tag}Element
(like <nav>
and <ruby>
); and also detects custom elements.
/**
*
* @param {string} tag
*/
export function tryCreateElement(tag) {
const element = document.createElement(tag)
const repr = element.toString()
const output = {
element,
tag,
type: 'standard',
isValid: repr === '[object HTMLUnknownElement]' ? null : true
}
if (
[
'annotation-xml',
'color-profile',
'font-face',
'font-face-src',
'font-face-uri',
'font-face-format',
'font-face-name',
'missing-glyph'
].includes(tag)
) {
// These are not valid customElement identifiers
// But if not defined, they will be '[object HTMLUnknownElement]', anyway.
} else if (tag.includes('-')) {
output.type = 'customElement'
if (repr === '[object HTMLElement]') {
output.isValid = false
}
}
return output
}
{ type: 'standard', isValid: null }
is an unsupported standard element.
About that repo in the answer, it seems that the code is simply
/*
* Feature test HTML element support
*
* @param {String} tag
* @return {Boolean|Undefined}
*/
export default function isElementSupported(tag) {
return {}.toString.call(document.createElement(tag)) !== '[object HTMLUnknownElement]';
}
It did work well other than that it doesn't invalidate custom elements.
精彩评论