React Web应用（内嵌移动端iframe）通过DeepLink跳转APP页面求助

由于移动端浏览器/WebView出于安全考虑，通常会拦截iframe内部发起的自定义协议（如mobileapp://）跳转请求，所以你之前尝试的直接在iframe内修改location.href或用普通<a>标签的方法会失效。以下是仅修改Web应用代码就能尝试的可行方案：

• 通过父窗口执行跳转
  让顶层窗口（即承载iframe的APP WebView）来处理DeepLink跳转，代码示例：

  const handleJump = () => {
    if (window.parent) {
      window.parent.location.href = 'mobileapp://dashboard';
    }
  };
  

  注意：如果你的Web应用和APP WebView存在跨域问题，这个方法可能会被浏览器的同源策略阻止。但如果APP的WebView已经配置了允许跨域访问（比如设置了allow-top-navigation等属性），这个方案就能生效。

• 创建带_top目标的隐藏链接并模拟点击
  强制跳转在顶层窗口上下文执行，绕过iframe的限制，代码示例：

  const openAppPage = () => {
    const link = document.createElement('a');
    link.href = 'mobileapp://dashboard';
    link.target = '_top'; // 指定顶层窗口打开
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
  

  将按钮的onClick事件绑定这个函数即可。

• 使用window.open指定顶层窗口
  调用window.open时指定_top作为目标窗口，让跳转由顶层WebView处理：

  const handleOpen = () => {
    window.open('mobileapp://dashboard', '_top');
  };
  

这些方案的核心都是让顶层窗口上下文来执行DeepLink跳转，避免iframe的安全拦截。如果APP的WebView有极其严格的安全策略（比如完全禁止iframe操作顶层窗口），那可能无法仅通过Web代码解决，但以上是目前能尝试的最优方向。

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