在使用 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 (
{/* Your component content here */}
);
}
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 }): 开始监听 元素的变化，只关注子节点的添加和删除。
- 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 设备上获得一致的用户体验。请根据你的具体情况调整代码，并进行充分的测试。
