iPhone设备中jQuery的.after()方法插入纯文本而非HTML异常问题

根因说明 #

iOS Safari浏览器存在noscript标签读取兼容问题：当页面JavaScript处于启用状态时，noscript标签内的内容会被浏览器自动转义为纯文本，读取.html()时拿到的是转义后的字符实体，插入DOM时就会直接显示为文本而非渲染HTML。

排查步骤 #

• 跨环境验证：分别在安卓设备、桌面端Chrome/Safari测试相同代码，若仅iOS设备出现该异常，可排除通用逻辑错误
• 内容读取验证：在iOS Safari调试面板中打印$noscript.html()的输出，若返回内容中的<、>等标签符号被转义为<、>，即可定位为noscript读取兼容问题
• 替换验证：临时将noscript标签替换为style="display:none"的普通div，若插入内容正常渲染，可完全确认问题来源

解决方案 #

方案1：替换noscript为隐藏容器（最简便，推荐） #

直接废弃noscript标签，改用普通隐藏容器存储待插入内容，原有JS逻辑无需修改：

<!-- 替换前 -->
<noscript class="show-phone"><a href="tel:+1 (234) 567-89-00" class="topmenu__phone">+1 (234) 567-89-00</a></noscript>
<!-- 替换后 -->
<div class="show-phone" style="display:none"><a href="tel:+1 (234) 567-89-00" class="topmenu__phone">+1 (234) 567-89-00</a></div>

方案2：强制解析HTML后插入（需保留noscript时使用） #

修改JS插入逻辑，将读取到的字符串强制解析为DOM节点后再插入：

// 修改前
jQuery(this).after($noscript.html());
// 修改后
jQuery(this).after($($noscript.html()));

方案3：自定义属性存储数据（完全规避标签兼容问题） #

直接将电话号码存储在原按钮的自定义属性中，无需额外存储节点：

<a href="tel:+1 (234) 567-89-00" data-phone="+1 (234) 567-89-00" class="topmenu__phone button button--small"><svg><use href="#icon_call"/></svg> Call us</a>

JS插入逻辑改为直接生成标签：

function show_phone_numbers() {
  $('a.button[href^="tel:"]').each(function() {
    const $this = jQuery(this);
    $this.hide().after(`<a href="tel:${$this.data('phone')}" class="topmenu__phone">${$this.data('phone')}</a>`);
  });
}

相关异常截图 #

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