Search code examples
javascripthtmldialogpolyfills

How to detect if browser supports dialog

Posted here is an answer that instructs those who miss the old window.showModalDialog JavaScript function to use the 

<dialog>

element instead. I have used this along with the polyfill needed for IE and FF and it works. However, there is a noticeable lag introduced when using the polyfill that I would like to avoid for Chrome (not to mention there is a warning not to use the polyfill when browsers support it). How do I detect whether or not the dialog element is supported so I can leave out the polyfill processing? Specifically these lines:

var dialog = document.getElementById('<element id>');
dialogPolyfill.registerDialog(dialog);
Solution

  • You could write a simple test like this:

    if (typeof HTMLDialogElement === 'function') {
  /** yep */
} else {
  /** nope */
}