解决Safari中与iframe交互后页面放大的问题

以下是几个经过验证的可行方案，针对你遇到的Paddle支付弹窗关闭后页面放大的问题：

• 监听弹窗关闭事件，强制重置页面缩放与视口
  Paddle的支付弹窗通常会提供关闭回调，在回调里直接重置页面的缩放状态和视口设置，覆盖可能被iframe修改的属性：

  // 绑定Paddle弹窗关闭事件（根据实际集成的Paddle API调整）
  Paddle.Checkout.onClose(() => {
    // 重置页面缩放比例
    document.body.style.zoom = '100%';
    // 重新设置视口属性并触发浏览器重绘
    const viewportMeta = document.querySelector('meta[name="viewport"]');
    if (viewportMeta) {
      const originalContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
      viewportMeta.content = originalContent;
      // 强制触发视口更新
      viewportMeta.setAttribute('content', originalContent);
    }
    // 针对iOS Safari的视觉视口修复
    if (window.visualViewport) {
      window.visualViewport.scale = 1;
    }
  });
  

• 通过sandbox属性限制iframe对父页面的操作
  给Paddle的iframe添加sandbox属性，限制它修改父页面的能力，同时保留支付所需的必要权限：

  <iframe 
    src="你的Paddle支付页面地址" 
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
    <!-- 其他原有属性 -->
  ></iframe>
  

  注意：添加sandbox后需要测试完整支付流程，确保不会影响输入、提交等核心功能。

• 移动端浏览器的针对性修复
  部分移动端浏览器（如iOS Safari）在输入框聚焦时会自动放大页面，关闭弹窗后不会自动恢复。可以监听页面焦点变化，在弹窗关闭后重置页面缩放：

  window.addEventListener('blur', () => {
    // 检测Paddle iframe是否已关闭或隐藏
    const paddleIframe = document.querySelector('iframe[src*="paddle"]');
    if (!paddleIframe || paddleIframe.offsetParent === null) {
      // 重置页面缩放
      document.documentElement.style.transform = 'scale(1)';
      document.documentElement.style.transformOrigin = '0 0';
      // 修正滚动位置偏移
      window.scrollTo(0, window.scrollY);
    }
  });
  

内容的提问来源于stack exchange，提问作者xVarlordx