iOS Safari Web App关闭弹窗无法返回父页面问题排查

问题根源 #

iOS的独立Web App（standalone模式）对外部弹窗的处理机制有特殊性：当从Web App打开第三方弹窗（比如Telegram登录窗口），弹窗关闭后系统会默认切回最近的Safari会话，而非Web App本身，这和常规浏览器环境的行为不同。

可行解决方案 #

1. 使用Telegram Login Widget的回调模式替代跳转

直接通过前端回调处理登录结果，避免页面跳转触发iOS的会话切换：

// 初始化Telegram登录按钮时指定回调函数
window.TelegramLoginWidget.init({
  bot_id: '你的Bot ID',
  request_access: 'write',
  callback: (authData) => {
    // 处理登录数据，比如发送到后端验证
    console.log('Telegram登录数据:', authData);
    // 强制聚焦Web App，防止切到Safari
    window.focus();
  }
});

这种方式下，登录完成后不会触发页面跳转，回调执行后主动调用window.focus()可以确保Web App保持活跃状态。

2. 监听页面可见性，弹窗关闭后强制唤醒Web App

针对iOS的特性，添加页面可见性监听，当Web App重新变为可见时立即聚焦：

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    window.focus();
  }
});

另外，也可以手动监听弹窗状态，关闭后主动聚焦：

// 打开Telegram登录弹窗
const loginWindow = window.open('你的Telegram授权链接', '_blank', 'width=400,height=600');
// 定时检查弹窗是否关闭
const checkInterval = setInterval(() => {
  if (loginWindow.closed) {
    clearInterval(checkInterval);
    window.focus();
    // 这里可以继续处理后续的登录逻辑
  }
}, 500);

3. 自定义授权链接并处理跳转后的聚焦

构造Telegram授权链接时，指定redirect_uri为当前Web App地址，处理完授权数据后立即聚焦：

// 构造授权链接
const authUrl = `https://oauth.telegram.org/auth?bot_id=你的Bot ID&request_access=write&redirect_uri=${encodeURIComponent(window.location.href)}&force_login=true`;
// 打开弹窗
const loginWindow = window.open(authUrl, '_blank');

在Next.js页面中监听URL参数，处理完成后清除参数并聚焦：

import { useEffect } from 'react';

export default function LoginPage() {
  useEffect(() => {
    // 检查URL中的Telegram授权数据
    if (window.location.hash) {
      const authData = new URLSearchParams(window.location.hash.slice(1));
      // 解析并处理数据，比如发送到后端
      console.log('授权数据:', authData);
      // 清除URL中的hash参数
      window.history.replaceState({}, document.title, window.location.pathname);
      // 强制聚焦Web App
      window.focus();
    }
  }, []);

  return <div>登录页面</div>;
}

为什么之前的尝试无效 #

• 移除iframe没用：问题根源不是iframe，而是iOS独立Web App的弹窗会话管理机制，和是否用iframe渲染登录按钮无关。
• 尝试嵌入iframe失败：Telegram登录页面设置了X-Frame-Options: sameorigin，禁止跨域嵌入，所以这种方式本身不可行。

内容的提问来源于stack exchange，提问作者djast.in.time