Safari修改iframe的src属性配置报错，Chrome/Firefox无错的原因咨询

这是个典型的浏览器兼容性差异问题，核心原因在于不同厂商对DOM内置属性的属性描述符实现逻辑不一样，尤其是旧版本Safari的处理更严格：

1. DOM属性≠普通JS对象属性 #

iframe的src是浏览器内置的DOM属性，不是普通的JavaScript对象属性。早期的Web规范对于DOM属性的configurable等描述符的定义并没有完全统一，不同浏览器厂商的实现存在分歧。

2. Safari 11.0.1的严格规范执行 #

在这个旧版本的Safari中，iframe的src属性被默认设置为不可配置（configurable: false）。根据ES规范，如果你尝试修改一个不可配置属性的configurable值（哪怕是从false改成true），必然会抛出TypeError——这就是你看到的报错原因。

3. Chrome/Firefox的兼容性妥协 #

Chrome和Firefox为了兼容更多现有代码，对DOM内置属性的属性描述符做了宽松处理：

• 它们可能默认把src这类DOM属性的configurable设为true；
• 即使原本是false，也允许开发者只修改writable这类其他属性，而不会因为触碰configurable而报错。
  简单来说，这俩浏览器在处理DOM属性时，没有像对待普通JS对象那样严格执行规范的限制。

验证方法 #

你可以在不同浏览器里执行这段代码，查看src属性的初始描述符：

console.log(Object.getOwnPropertyDescriptor(iframe, 'src'));

• 在Safari 11.0.1里，configurable会显示为false；
• 在Chrome/Firefox里，这个值大概率是true，或者浏览器会允许你修改writable而不触发错误。

兼容解决方案 #

如果你需要兼容旧版Safari，只需要去掉configurable: true的设置，只修改writable即可：

Object.defineProperty(iframe, 'src', { writable: false });

这样既达到了禁止修改src的目的，又不会触发Safari的报错。

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