Comment détecter si le navigateur prend en charge dialogue

Question

Posté here est une réponse qui demande à ceux qui ratent l'ancienne fonction JavaScript window.showModalDialog pour utiliser le

<dialog> 

élément

à la place. J'ai utilisé ceci avec le polyfill nécessaire pour IE et FF et cela fonctionne. Cependant, il y a un décalage notable introduit lors de l'utilisation du polyfill que je voudrais éviter pour Chrome (sans oublier qu'il y a un avertissement de ne pas utiliser le polyfill lorsque les navigateurs le supportent). Comment puis-je détecter si l'élément de dialogue est pris en charge afin que je puisse ignorer le traitement de polyfill? Plus précisément ces lignes:

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

Answer 1

Vous pouvez écrire un test simple comme ceci:

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

Answer 2

Essayez console.log(typeof window.showModalDialog === 'undefined')

if (typeof window.showModalDialog === 'undefined') { 
 
    console.log('No. '); 
 
} else { 
 
    console.log('Yes! '); 
 
}