React Web应用点击按钮唤起Android外部APP时避免页面刷新

问题原因 #

Android端的Chrome、Kiwi、Brave、三星互联网、Edge等Chromium内核浏览器，在通过<a>标签触发deeplink唤起外部APP时，会把deeplink的跳转判定为页面导航操作，即便APP成功唤起，也会在后台自动刷新页面——这是这类浏览器特有的处理逻辑，和iOS Safari、Android Firefox等其他浏览器的行为不同。

组件层面的解决方法 #

不需要持久化页面状态，通过修改组件的点击逻辑就能避免刷新，以下两种方案可以尝试：

方案1：阻止默认跳转+手动触发deeplink #

修改你的点击事件，先阻止<a>标签的默认行为，再用JavaScript手动触发deeplink跳转：

import { MouseEvent } from 'react';

const handleButtonClick = (e: MouseEvent<HTMLAnchorElement>) => {
  e.preventDefault(); // 切断<a>标签的默认导航流程
  window.location.href = deeplink; // 手动触发deeplink
};

// 组件代码
<a
  href={deeplink}
  className="btn btn-primary"
  role="button"
  onClick={handleButtonClick}
>
  Open external app
</a>

方案2：用隐藏iframe触发deeplink（更稳定） #

如果方案1没解决问题，可以试试用隐藏iframe来触发deeplink，这种方式不会被浏览器识别为页面导航，能彻底避免后台刷新：

import { MouseEvent, useRef } from 'react';

const DeeplinkButton = () => {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  const handleButtonClick = (e: MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    
    if (iframeRef.current) {
      iframeRef.current.src = deeplink;
    } else {
      // 临时创建iframe触发跳转
      const tempIframe = document.createElement('iframe');
      tempIframe.style.display = 'none';
      tempIframe.src = deeplink;
      document.body.appendChild(tempIframe);
      // 触发后移除iframe，避免冗余DOM
      setTimeout(() => document.body.removeChild(tempIframe), 1000);
    }
  };

  return (
    <>
      <a
        href={deeplink}
        className="btn btn-primary"
        role="button"
        onClick={handleButtonClick}
      >
        Open external app
      </a>
      {/* 预渲染隐藏iframe，复用触发 */}
      <iframe ref={iframeRef} style={{ display: 'none' }} />
    </>
  );
};

export default DeeplinkButton;

注意点 #

• 保留<a>标签的href属性是为了兼容长按复制链接、无障碍访问等场景，同时作为JS逻辑失效时的降级方案。
• 方案2的iframe方式对Chromium系浏览器的适配性更好，如果你在方案1中仍遇到刷新问题，优先尝试这个方案。

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