safari 浏览器在与 iframe 交互后，有时会出现页面缩放的问题，影响用户体验。本文针对使用 Paddle 支付系统等场景下，iframe 交互后 Safari 浏览器页面放大的问题，提供了一种基于 React 的解决方案，通过 MutationObserver 监听并移除 PaddleJS 动态添加的 viewport meta 标签，有效防止页面缩放，恢复正常的显示比例。
在使用 paddle 支付系统等 overlay 模式时，safari 浏览器可能会在与 iframe 交互后出现页面缩放的情况。这通常是由于 paddlejs 在 iframe 打开时，动态地向 dom 中添加了一个 viewport meta 标签，导致 ios 设备上的页面缩放。虽然常见的 viewport 设置和 css 样式可能无法解决此问题，但可以通过监听 dom 变化并移除该 meta 标签来解决。
解决方案：使用 React 和 MutationObserver
以下是使用 React 和 MutationObserver 解决此问题的代码示例：
import { useEffect } from 'react'; function MyComponent() { 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 ( <div> {/* Your component content here */} </div> ); } export default MyComponent;
代码解释：
- useEffect Hook: useEffect 用于在组件挂载后执行副作用操作。
- MutationObserver: MutationObserver 用于监听 DOM 树的变化。
- mutationsList: mutationsList 是一个包含所有变化的 MutationRecord 对象的数组。
- mutation.type === ‘childList’: 检查变化类型是否为子节点列表的变化（即添加或删除节点）。
- mutation.addedNodes.length > 0: 检查是否有新节点被添加到 DOM 中。
- document.querySelector(‘[id=”__mobileViewportControl_hook__”]’): 使用选择器找到 PaddleJS 添加的 viewport meta 标签。 __mobileViewportControl_hook__ 是 PaddleJS 使用的特定 ID。
- ?.remove(): 如果找到该 meta 标签，则将其从 DOM 中移除。
- observer.observe(document.querySelector(‘head’)!, { childList: true }): 开始监听 <head> 元素的变化，只关注子节点的添加和删除。
- observer.disconnect(): 在组件卸载时断开观察者，防止内存泄漏。
注意事项：
- PaddleJS ID: 确保使用正确的 ID 选择器来定位 PaddleJS 添加的 meta 标签。如果 PaddleJS 更新了其 ID，则需要相应地更新代码。
- 性能考虑: MutationObserver 可能会对性能产生影响，特别是在大型 DOM 树上。因此，应尽量缩小监听范围，并只在必要时使用。
- 兼容性: 确保你的 React 代码和使用的 JavaScript 特性与目标浏览器兼容。
- 错误处理: 增加错误处理机制，例如，如果 document.querySelector(‘head’) 返回 NULL，则不执行观察者。
总结：
通过使用 React 的 useEffect Hook 和 MutationObserver，可以有效地监听 DOM 变化，并在 PaddleJS 添加 viewport meta 标签时将其移除，从而解决 Safari 浏览器在与 iframe 交互后页面缩放的问题。 这种方法提供了一种可靠的解决方案，可以确保用户在 iOS 设备上获得一致的用户体验。请根据你的具体情况调整代码，并进行充分的测试。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
