Safari下JavaScript .innerHTML赋值后内容不显示的兼容问题

Safari环境下内容渲染为空是两个明确问题叠加导致的：

• 代码中循环使用的变量i没有做声明，会成为隐式全局变量，部分版本iOS Safari的JS引擎在DOM操作上下文里遇到这类未声明变量会直接抛错，中断后续所有DOM赋值逻辑
• 代码里调用的str.bold()是早就被规范废弃的遗留字符串方法，不属于标准推荐API，iOS Safari自带的XSS防护机制会把这个方法生成的带<b>标签的字符串判定为风险内容，赋值给innerHTML时会直接拦截清空，根本不会进入DOM解析流程，这也是为什么其他浏览器正常、只有Safari下对应位置完全空白的核心原因，和你选innerHTML还是innerText的赋值方式没有关系。

不要用废弃的bold()方法，手动拼接标准HTML字符串，同时补全变量声明，建议用querySelectorAll获取静态节点列表，避免getElementsByClassName返回动态集合带来的取值异常，修复后可直接运行的代码如下：

// 获取所有需要加粗的节点，querySelectorAll返回静态NodeList，不会受DOM变动影响
const boldTargets = document.querySelectorAll('.text-bold')
// 用let声明循环变量，避免隐式全局变量问题
for (let i = 0; i < boldTargets.length; i++) {
  const originContent = boldTargets[i].textContent
  // 手动拼接标准<b>标签，完全规避废弃API的兼容问题
  boldTargets[i].innerHTML = `<b>${originContent}</b>`
}

对应测试用的HTML结构不需要调整：

<div>
  <p class="text-bold">Hello!</p>
  <p class="text">Hi!</p>
  <p class="text-bold">Hey!</p>
</div>

如果改完还是有渲染异常，可以按顺序排查两个点：

• 检查页面的Content-Security-Policy配置，Safari对CSP规则的执行严格度高于Chrome、Firefox等浏览器，如果策略里禁止了内联HTML写入，会直接拦截innerHTML的赋值操作
• 赋值前把要写入的字符串打印到Safari控制台，确认字符串里没有混入不可见的零宽字符、控制字符，这类特殊字符在Safari的DOM解析器里会直接触发解析失败，导致内容空白

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