如何用JavaScript检测DOM属性是否被浏览器支持

当然可以通过JavaScript实现这类检测，下面提供两种实用方案，分别适用于通用DOM属性和你提到的Permissions Policy类属性场景：

方案一：通用DOM属性检测（适用于大多数属性） #

核心思路是：创建测试元素并设置目标属性，对比设置值与读取值是否一致——如果浏览器识别该属性，读取到的属性值会和设置值匹配；若被忽略，通常会返回空或默认值。

function isDomAttributeSupported(tagName, attrName, attrValue) {
  const element = document.createElement(tagName);
  element.setAttribute(attrName, attrValue);
  
  // 同时检查DOM对象属性和HTML属性（部分属性存在映射差异）
  const domPropMatches = element[attrName] === attrValue;
  const htmlAttrMatches = element.getAttribute(attrName) === attrValue;
  
  return domPropMatches || htmlAttrMatches;
}

// 测试iframe的allow="payment"属性
console.log(isDomAttributeSupported('iframe', 'allow', 'payment'));

方案二：针对Permissions Policy属性的精准检测 #

针对allow这类和权限控制相关的属性，仅仅检测属性是否被读取还不够，最好验证其实际是否生效。可以结合Permissions API，在带目标属性的iframe中请求对应权限，判断权限状态：

async function isPaymentAllowAttributeSupported() {
  try {
    const iframe = document.createElement('iframe');
    iframe.src = 'about:blank';
    iframe.allow = 'payment';
    document.body.appendChild(iframe);
    
    // 在iframe上下文查询支付权限状态
    const permissionStatus = await iframe.contentWindow.navigator.permissions.query({ name: 'payment' });
    // 若属性生效，权限状态不会是"denied"（全局策略限制除外）
    const isSupported = permissionStatus.state !== 'denied';
    
    document.body.removeChild(iframe);
    return isSupported;
  } catch (err) {
    // 报错说明不支持该权限或属性
    return false;
  }
}

// 调用测试
isPaymentAllowAttributeSupported().then(supported => console.log('allow="payment"是否被支持：', supported));

补充说明 #

• 通用方案适合检测各类DOM属性，但要注意部分属性的DOM对象映射规则可能不同，所以同时检查element[attrName]和getAttribute能提高准确性。
• 权限专属方案更精准，因为有些浏览器可能能读取属性值但不实际生效，这种方法直接验证权限控制逻辑是否正常工作。

内容的提问来源于stack exchange，提问作者Daphoque