为何location.replace()执行后仍触发后续代码？iOS通用链接适配问题

疑问：为什么执行location.replace()后仍弹出alert("hoge")？ #

执行以下脚本时，明明先调用了location.replace()跳转Universal Links，却没有跳转页面，反而弹出了"hoge"提示：

<script>
  (async function(){
      await new Promise((resolve)=>{
      location.replace("https://www.instagram.com"); // iOS Universal Links
      resolve();
      });
      alert("hoge");
  })();
</script>

需求 #

• iOS：触发Universal Links启动对应应用，同时调用window.close()关闭当前页面
• 非iOS：不触发Universal Links，直接跳转目标页面

尝试的方案与问题 #

方案1：直接在await后调用window.close() #

替换为以下脚本后，iOS上会出现页面先关闭、应用未启动的问题：

<script>
  (async function(){
      await new Promise((resolve)=>{
      location.replace("https://www.instagram.com"); // iOS Universal Links
      resolve();
      });
      window.close();
  })();
</script>

方案2：用setTimeout()延迟关闭页面 #

使用setTimeout()能正常工作，但依赖固定时序，不希望采用这种方案：

<script>
  (async function(){
      await new Promise((resolve)=>{
      location.replace("https://www.instagram.com"); // iOS Universal Links
      resolve();
      });
      setTimeout(function(){window.close();}, 500);
  })();
</script>

环境 #

• iPhone 15 Pro Max
• iOS 17.4
• Safari.app

解答 #

为什么第一个脚本会弹出alert？ #

iOS Safari中，触发Universal Links跳转应用的操作是异步非阻塞的，但你的Promise会立即resolve，导致后续的alert("hoge")在系统处理跳转请求前就执行了。当系统尝试处理跳转时，当前页面的同步代码还在运行，跳转请求被中断，最终页面没跳转，alert正常弹出。

解决时序问题的方案 #

不需要依赖setTimeout，可以利用iOS Safari处理Universal Links的特性，通过监听页面状态事件来触发关闭操作：

<script>
  (function() {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    const targetUrl = "https://www.instagram.com";

    if (isIOS) {
      // iOS下触发Universal Links
      location.replace(targetUrl);
      // 监听pagehide事件，确保应用启动后再关闭页面
      window.addEventListener('pagehide', () => {
        window.close();
      });
      // 兜底：如果用户选择留在浏览器，延迟检查页面可见性后关闭
      setTimeout(() => {
        if (document.visibilityState === 'visible') {
          window.close();
        }
      }, 1000);
    } else {
      // 非iOS直接跳转
      location.replace(targetUrl);
    }
  })();
</script>

原理说明

1. iOS设备识别：通过用户代理字符串判断当前是否为iOS设备
2. 跳转触发与事件监听：调用location.replace()后，iOS系统尝试拉起应用，此时页面会进入pagehide状态（应用启动成功时），通过该事件触发关闭操作，避免时序冲突
3. 兜底处理：如果用户选择留在浏览器，延迟检查页面可见性，再执行关闭逻辑，覆盖所有场景

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