Django项目中Leaflet Marker的Popup在Safari中无法打开

我之前也踩过Safari里Leaflet Popup不触发的坑，结合你的代码来看，大概率是以下几个兼容性问题导致的，给你几个针对性的解决思路：

1. 模板字符串拼接与换行的兼容问题 #

Safari对JS里的字符串拼接和转义换行（\n）的处理和Chrome有差异，你原来的代码用+拆分HTML字符串并插入\n，可能导致Safari解析Popup内容时出错，进而阻止了点击事件的触发。

解决方法：使用完整的ES6模板字符串（反引号包裹），直接编写HTML内容，不需要拆分拼接，也不需要手动加\n——模板字符串本身支持换行。

2. 未转义的特殊字符破坏HTML结构 #

如果你的place.fields.name或comment里包含引号、尖括号这类特殊字符，在Safari里会直接破坏Popup的HTML结构，导致Popup无法正常渲染和触发。

解决方法：添加一个HTML转义函数，对动态内容进行转义处理，避免注入问题同时兼容Safari。

3. Safari对Leaflet默认点击事件的兼容性 #

少数情况下，Safari的事件模型会阻止Leaflet默认的bindPopup点击触发逻辑，这时可以显式绑定click事件来强制打开Popup。

优化后的完整代码示例 #

// 定义HTML转义函数，处理特殊字符
function escapeHTML(str) {
  if (!str) return ''; // 处理空值情况
  return str.replace(/[&<>"']/g, (match) => {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return escapeMap[match];
  });
}

for (const place of added_place_json) {
  // 确保经纬度是数字类型（Safari对类型更严格）
  const lat = Number(place.fields.lat);
  const lng = Number(place.fields.long);
  
  // 用完整模板字符串编写Popup内容，自动支持换行
  const popupContent = `
    <div class="card" style="width: 15rem;">
      <h6 class="card-header">Name place:<br>${escapeHTML(place.fields.name)}</h6>
      <div class="card-body">
        <p class="card-text" style="overflow: auto">Place comment:<br>${escapeHTML(place.fields.comment)}</p>
      </div>
    </div>
  `;

  const marker = L.marker([lat, lng]).addTo(map);
  marker.bindPopup(popupContent);
  
  // 显式绑定点击事件，兼容Safari的事件模型
  marker.on('click', function() {
    this.openPopup();
  });
}

另外补充两个小细节：

• 把overflow: scroll改成overflow: auto，当内容不需要滚动时会自动隐藏滚动条，体验更好；
• 确保Django模板里的added_place_json已经正确转义（你用了escapejs是对的，继续保持），避免JSON解析出错。

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