Js判断浏览器是否兼容某方法或属性

所谓兼容性，就是看浏览器是否支持当前对象的属性或是方法，先通过获得页面文本内容的方式来了解兼容性，并封装函数或对象以解决此类问题。

判断浏览器是否支持html标签属性

html属性 in DOM对象 ：判断是否支持这个属性，支持返回true，不支持返回false。比如判断input标签是否兼容placeholder属性：

if('placeholder' in document.createElement('input')){
        console.log('浏览器支持placeholder这个标签属性')
}

判断浏览器是否支持js属性或方法

typeof 属性或方法 等于 undefined ，则表示不支持。比如判断addEventListener方法是否兼容：

if(typeof addEventListener === 'undefined'){
	console.log('不支持')
}else{
	console.log('支持')
}

JavaScript方法兼容性检测网站

Caniuse用于查看浏览器对各种新特性的兼容情况。

 网址：https://caniuse.com

使用该工具很简单。 通过简单地搜索属性，参数或功能，caniuse还会准确告诉您哪些浏览器和版本支持该技术。 CanIUse还可以让您知道所需属性的变体。 这样，您就知道哪种浏览器支持哪种媒体查询。

比如搜索“XMLHttpRequest”的兼容性，截图如下：