防止 Safari 在与 iframe 交互后缩放页面的终极指南

本文旨在解决 Safari 浏览器在用户与 iframe 交互后出现页面缩放的问题。该问题通常在使用第三方支付系统（如 Paddle）时出现，因为它们会在 DOM 中动态插入 viewport meta 标签，导致 iOS 设备上的缩放异常。本文提供了一种使用 React 的解决方案，通过 MutationObserver 监听并移除该 meta 标签，从而避免页面缩放。

在使用第三方支付系统，例如 Paddle，并采用 overlay 方式时，Safari 浏览器有时会在与 iframe 交互后出现页面缩放的问题。具体表现为，当用户在 iframe 中输入信用卡信息等数据后关闭 iframe，返回主页面时，页面界面会被放大。

这个问题的原因在于某些第三方库，例如 PaddleJS，在打开其 iframe 时，会在你的 DOM 中动态添加一个包含 viewport 设置的 meta 标签。这个标签的添加在某些情况下会导致 iOS 设备上的页面缩放问题。

虽然尝试使用诸如 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 和 -webkit-text-size-adjust: none !important; touch-action: none !important; 等方法可能无法解决问题，但我们可以通过监听 DOM 的变化，并在 meta 标签被添加时将其移除来解决。

以下提供一个使用 React 的解决方案，通过 MutationObserver 监听 head 标签的变化，一旦发现特定 id 的 meta 标签被添加，就将其移除：

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();
        }
      }
    });
    observer.observe(document.querySelector('head')!, {
      childList: true,
    });
    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    // Your component's JSX
    <div>
      {/* ... */}
    </div>
  );
}

export default MyComponent;

代码解释：

Tellers AI

Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。

78

查看详情

1. useEffect Hook: useEffect 用于在组件挂载后执行副作用操作。在这个例子中，它用于初始化 MutationObserver。
2. MutationObserver: MutationObserver 用于监听 DOM 树的变化。
3. mutationsList: mutationsList 是一个包含所有变化的 MutationRecord 对象的数组。
4. mutation.type === 'childList': 检查变化类型是否为子节点列表的变化（即添加或删除节点）。
5. mutation.addedNodes.length > 0: 检查是否有节点被添加到 DOM 中。
6. document.querySelector('[id="__mobileViewportControl_hook__"]')?.remove();: 选择器查找具有 id="__mobileViewportControl_hook__" 的 meta 标签，并将其从 DOM 中移除。 PaddleJS 创建的 meta 标签通常具有此 ID。 请根据实际情况调整选择器。?. 是可选链操作符，防止在找不到元素时报错。
7. observer.observe(document.querySelector('head')!, { childList: true });: 配置 MutationObserver 监听 head 标签的子节点变化。 ! 是非空断言操作符，表示我们确信 document.querySelector('head') 不会返回 null。
8. return () => { observer.disconnect(); };: 在组件卸载时，断开 MutationObserver 的连接，防止内存泄漏。

使用方法：

将上述代码添加到你的 React 组件中。确保组件在包含 iframe 的页面中渲染。

注意事项：

• ID 选择器: 上述代码使用了 id="__mobileViewportControl_hook__" 作为选择器来查找需要移除的 meta 标签。 如果你的第三方库使用的 ID 不同，请相应地修改选择器。
• 性能： MutationObserver 可能会对性能产生一定的影响，尤其是在大型 DOM 树上。 请确保只在必要的组件中使用此方法，并尽量缩小监听范围。
• 兼容性： MutationObserver 在现代浏览器中都得到了很好的支持。 如果需要支持旧版本的浏览器，可能需要使用 polyfill。
• 测试： 在不同的设备和浏览器上进行测试，以确保解决方案能够正常工作。

总结：

通过使用 MutationObserver 监听 DOM 变化并移除由第三方库动态添加的 viewport meta 标签，可以有效地解决 Safari 浏览器在与 iframe 交互后出现页面缩放的问题。 这种方法比简单地设置 viewport meta 标签或 CSS 规则更加可靠，因为它直接解决了问题的根源。 请记住，根据你使用的第三方库，可能需要调整代码中的选择器。

以上就是防止 Safari 在与 iframe 交互后缩放页面的终极指南的详细内容，更多请关注php中文网其它相关文章！