禁止 Safari 在与 Iframe 交互后缩放页面-js教程-PHP中文网

禁止 safari 在与 iframe 交互后缩放页面

Safari 浏览器在与嵌入的 Iframe 交互后出现页面缩放的问题，困扰着许多开发者。特别是在使用第三方支付系统，如 Paddle，并采用 overlay 方式渲染 Iframe 时，更容易出现此问题。用户在 Iframe 中输入信息后，返回主页面时界面会被放大，影响用户体验。

第一段摘要：本文旨在解决 Safari 浏览器在与嵌入的 Iframe 交互后，页面出现缩放的问题。该问题通常发生在需要用户在 Iframe 中输入信息（如信用卡数据）的场景下。本文提供一种使用 React 的解决方案，通过监听 DOM 变化并移除特定 meta 标签，从而避免 Safari 浏览器的自动缩放行为。

问题分析

该问题通常是由于某些第三方库（例如 PaddleJS）在打开 Iframe 时，动态地向 DOM 中添加了一个包含 viewport 设置的 meta 标签，导致 iOS Safari 浏览器进行缩放。常见的解决方案，如直接在 HTML 中设置 viewport 或使用 CSS 规则 -webkit-text-size-adjust: none !important; touch-action: none !important; 可能无法生效，因为这些设置会被动态添加的 meta 标签覆盖。

解决方案

以下提供一个使用 React 的解决方案，通过监听 DOM 的变化，当检测到特定 meta 标签被添加时，将其移除，从而避免 Safari 浏览器的自动缩放行为。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

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 (
    <div>
      {/* Your component content here */}
    </div>
  );
}

export default MyComponent;

代码解释：

useEffect Hook: 使用 useEffect Hook 在组件挂载后执行副作用操作。
MutationObserver: 创建一个 MutationObserver 实例，用于监听 DOM 的变化。
mutationsList: MutationObserver 的回调函数接收一个 mutationsList 参数，其中包含了所有发生的 DOM 变化。
mutation.type === 'childList': 检查变化类型是否为子节点列表的变化（即有节点被添加或移除）。
mutation.addedNodes.length > 0: 检查是否有节点被添加到 DOM 中。
document.querySelector('[id="__mobileViewportControl_hook__"]')?.remove();: 使用 querySelector 查找具有特定 ID（__mobileViewportControl_hook__，这是 PaddleJS 添加的 meta 标签的 ID）的元素，并将其从 DOM 中移除。 注意： 这个 ID 是 PaddleJS 特有的，如果你的场景中 meta 标签的 ID 不同，请替换为正确的 ID。
observer.observe(document.querySelector('head')!, { childList: true });: 配置 MutationObserver 监听 head 元素的子节点变化。
return () => { observer.disconnect(); };: 在组件卸载时，断开 MutationObserver 的连接，防止内存泄漏。

使用步骤：

将上述代码添加到你的 React 组件中。
确保你的组件在包含 Iframe 的页面中渲染。
根据实际情况，修改 document.querySelector 中的 ID 选择器，以匹配需要移除的 meta 标签的 ID。

注意事项

ID 选择器: 确保 document.querySelector 使用的 ID 选择器与第三方库动态添加的 meta 标签的 ID 相匹配。可以使用浏览器的开发者工具来检查 meta 标签的 ID。
性能影响: MutationObserver 会监听 DOM 的变化，可能会对性能产生一定影响。建议仅在需要时才启用 MutationObserver，并在组件卸载时及时断开连接。
兼容性: MutationObserver 具有良好的浏览器兼容性，但建议在使用前进行测试，以确保在目标浏览器上正常工作。
替代方案： 如果直接修改第三方库的源代码可行，可以考虑修改第三方库，避免动态添加 meta 标签。但这通常不是一个推荐的做法，因为它会增加维护成本。