safari浏览器在与iframe交互后出现缩放问题，尤其是在使用PaddleJS等第三方支付系统时，是一个较为常见的困扰。问题的根源在于这些第三方库在打开iframe时，会在dom中动态添加一个viewport meta标签，这会导致ios设备上的Safari浏览器进行不必要的缩放，影响用户体验。传统的viewport设置和css样式调整往往无法解决这个问题，因为它是动态添加的。
针对这一问题，一种有效的解决方案是使用MutationObserver来监控<head>标签的变化，并在发现PaddleJS添加的viewport meta标签时将其移除。以下是一个基于React的示例代码：
import { useEffect } from 'react'; function PreventSafariZoom() { useEffect(() => { const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === 'childList' && mutation.addedNodes.Length > 0) { document .querySelector('[id="__mobileViewportControl_hook__"]') ?.remove(); } } }); const head = document.querySelector('head'); if (head) { observer.observe(head, { childList: true, }); } return () => { observer.disconnect(); }; }, []); return NULL; // 或者返回任何你需要的组件内容 } export default PreventSafariZoom;
代码解释：
- useEffect Hook: useEffect用于在组件挂载后执行副作用操作，这里用于设置MutationObserver。
- MutationObserver: MutationObserver 监听 DOM 树的变化。当 <head> 标签添加了新的子节点时，mutationsList 数组会包含相应的 mutation 记录。
- Mutation 检查: 遍历 mutationsList，检查 mutation.type 是否为 ‘childList’，以及 mutation.addedNodes.length 是否大于 0，确保是子节点添加事件。
- 移除 Meta 标签: 使用 document.querySelector(‘[id=”__mobileViewportControl_hook__”]’) 查找 PaddleJS 添加的 meta 标签（假设其 id 为 __mobileViewportControl_hook__。实际情况可能需要根据PaddleJS的版本和具体实现进行调整）。如果找到，则调用 remove() 方法将其从 DOM 中移除。
- observer.observe(): observer.observe(document.querySelector(‘head’)!, { childList: true }) 开始监听 <head> 标签的子节点变化。 childList: true 指定监听子节点的添加和删除。
- 清理函数: return () => { observer.disconnect(); }; 在组件卸载时断开 MutationObserver 的连接，防止内存泄漏。
- 组件返回值: 该组件返回 null，因为它主要用于副作用操作，不需要渲染任何 ui 元素。你也可以根据实际需要返回其他内容。
使用方法：
将 PreventSafariZoom 组件添加到你的React应用中。建议将其放在顶层组件或需要处理iframe交互的组件中。
注意事项：
- Meta标签ID: 上述代码假设PaddleJS添加的meta标签的id为__mobileViewportControl_hook__。你需要根据实际情况检查并修改这个id。可以通过浏览器的开发者工具查看动态添加的meta标签的id。
- 兼容性: MutationObserver 的兼容性良好，但对于一些旧版本的浏览器可能需要polyfill。
- 性能： MutationObserver 可能会对性能产生一定影响，尤其是在频繁发生DOM变化的情况下。但对于这种特定的场景，其影响通常可以忽略不计。
- 第三方库更新： PaddleJS或其他第三方库的更新可能会改变其添加meta标签的方式，因此需要定期检查并更新代码。
- 其他解决方案： 某些情况下，PaddleJS或类似的库可能提供了配置选项来禁用自动添加viewport meta标签的行为。如果存在这样的选项，优先考虑使用该选项，而不是使用MutationObserver。
总结：
通过使用MutationObserver，我们可以有效地解决Safari浏览器在与iframe交互后出现的缩放问题。这种方法具有较高的灵活性和可定制性，可以适应不同的第三方库和场景。然而，需要注意维护代码，并根据第三方库的更新进行相应的调整。在实施此解决方案之前，请务必彻底测试，以确保其在各种设备和浏览器上都能正常工作。
评论（已关闭）
评论已关闭