JavaScript如何为iframe标签在指定位置添加allowfullscreen属性

核心问题说明 #

• HTML 标准中属性的排列顺序不会对属性功能的生效产生任何影响，你遇到的“仅属性放在开头时生效”的情况大概率是其他干扰因素导致的，比如测试缓存、其他代码逻辑冲突、手动修改时同步触发了其他变更等。
• 原生DOM的setAttribute方法默认行为就是将新增属性追加到属性列表末尾，没有直接指定插入位置的参数。

自定义属性顺序实现方案 #

如果确实需要将指定属性放在属性列表最前面，可以通过先取出所有原有属性、清空现有属性、按期望顺序重新批量设置属性的方式实现，示例代码如下：

let iframe = document.getElementsByTagName("iframe")[0];
// 读取原有全部属性
const originAttributes = Array.from(iframe.attributes);
// 定义需要前置的属性列表
const prependAttrs = [
  { name: 'allowfullscreen', value: '' }
];
// 清空当前所有属性
while(iframe.attributes.length) {
  iframe.removeAttribute(iframe.attributes[0].name);
}
// 按顺序先加前置属性，再加原有属性
prependAttrs.forEach(attr => {
  iframe.setAttribute(attr.name, attr.value);
});
originAttributes.forEach(attr => {
  iframe.setAttribute(attr.name, attr.value);
});

运行上述代码后，生成的iframe标签就会是你期望的allowfullscreen在最开头的结构。

额外排查建议 #

如果修改属性顺序后功能才正常，建议你优先排查以下非顺序相关的问题，避免后续出现同类异常：

• 是否是allowfullscreen的属性值设置问题，部分场景下需要赋值为allowfullscreen而非空字符串才能生效
• 是否存在其他JS代码监听了iframe的属性变更，仅当属性插入顺序符合特定逻辑时才会执行后续适配操作
• 是否是页面缓存导致修改后的属性未及时生效，和顺序无关

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