ReactJS站点中如何阻止跳转时打开关联的App Store应用？

• 检查URL协议与结构
  确认跳转URL为标准http/https开头的App Store网页链接（如https://apps.apple.com/cn/app/xxx），而非itms-apps://这类直接唤起应用的自定义协议——这类自定义协议会触发系统级应用唤起，和JS方法无关。若需兼顾网页打开与应用唤起，可做降级处理：先通过window.open打开网页链接，延迟1秒左右再尝试触发自定义协议跳转。

• 规避浏览器弹窗拦截
  浏览器会拦截非用户主动交互触发的window.open调用，必须将跳转逻辑绑定在用户明确的交互事件上（如按钮点击、链接点击的onClick），禁止在组件挂载、异步请求完成等非用户触发时机执行。示例代码：

  const handleOpenAppStore = () => {
    const newTab = window.open('https://apps.apple.com/cn/app/xxx', '_blank');
    setTimeout(() => {
      window.location.href = 'itms-apps://itunes.apple.com/app/xxx';
    }, 1000);
    if (!newTab) {
      alert('请允许浏览器弹窗权限');
    }
  };
  
  <button onClick={handleOpenAppStore}>打开应用</button>
  

• 改用原生a标签实现跳转
  原生<a>标签是兼容性最好的跳转方式，直接设置target="_blank"和rel="noopener noreferrer"即可：

  <a 
    href="https://apps.apple.com/cn/app/xxx" 
    target="_blank" 
    rel="noopener noreferrer"
  >
    打开应用
  </a>
  

  若需同时唤起应用，可在a标签的点击事件中，先执行网页跳转，再触发自定义协议，确保操作在用户交互上下文内完成。

• 排查React事件处理问题
  检查是否在React合成事件中调用了e.preventDefault()，阻止了跳转的默认行为；若使用第三方UI组件库，确认组件内置逻辑未覆盖自定义跳转行为。

• 针对iOS Safari的特殊处理
  iOS Safari对弹窗和自定义协议限制更严格，可尝试创建隐藏a标签并手动触发点击：

  const handleOpen = () => {
    const link = document.createElement('a');
    link.href = 'https://apps.apple.com/cn/app/xxx';
    link.target = '_blank';
    link.rel = 'noopener noreferrer';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
  

  若涉及异步操作后的跳转，需先通过用户确认（如弹出确认框），在确认事件中执行跳转逻辑。

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