如何阻止react-native-webview自动唤起外部应用？

核心思路 #

通过拦截WebView的跳转请求，识别并阻止电商App专属的Scheme（如taobao://、tmall://）及唤起协议（如Android的intent://），同时拦截页面内JS触发的App唤起逻辑，确保所有请求都在WebView内处理，不会跳转到外部应用。

1. 跨平台基础拦截：onShouldStartLoadWithRequest #

这是React Native WebView提供的核心拦截回调，可在请求发起前判断是否允许加载。

代码示例：

import WebView from 'react-native-webview';

// 定义拦截逻辑
const shouldStartLoad = (request) => {
  // 列出需要拦截的电商Scheme和协议
  const blockedTargets = [
    'taobao://',
    'tmall://',
    'jd://',
    'pinduoduo://',
    'intent://taobao',
    'intent://tmall'
  ];
  
  const currentUrl = request.url.toLowerCase();
  // 检查当前请求是否命中拦截规则
  const isBlocked = blockedTargets.some(target => currentUrl.includes(target));
  
  if (isBlocked) {
    // 可选：添加用户提示，比如用Toast告知已阻止外部跳转
    // Toast.show('已阻止跳转到外部应用');
    return false; // 返回false阻止跳转
  }
  
  // 正常链接允许加载
  return true;
};

// 使用WebView组件
const AppWebView = () => {
  return (
    <WebView
      source={{ uri: 'https://your-ecommerce-url.com' }}
      onShouldStartLoadWithRequest={shouldStartLoad}
      // 其他必要属性
      javaScriptEnabled={true}
    />
  );
};

export default AppWebView;

2. 拦截JS触发的App唤起 #

部分电商页面会通过JS调用window.open或修改location.href来唤起App，这时候需要注入自定义JS覆盖这些行为。

代码示例：

// 注入的拦截脚本
const injectedJS = `
  // 保存原生window.open方法
  const originalOpen = window.open;
  // 重写window.open，拦截电商Scheme
  window.open = function(url) {
    const blockedSchemes = ['taobao://', 'tmall://', 'jd://', 'pinduoduo://'];
    const isBlocked = blockedSchemes.some(scheme => url.startsWith(scheme));
    if (isBlocked) {
      return false;
    }
    return originalOpen.apply(this, arguments);
  };

  // 拦截location.href跳转
  const originalHrefSetter = Object.getOwnPropertyDescriptor(window.location, 'href').set;
  Object.defineProperty(window.location, 'href', {
    set: function(url) {
      const blockedSchemes = ['taobao://', 'tmall://', 'jd://', 'pinduoduo://'];
      const isBlocked = blockedSchemes.some(scheme => url.startsWith(scheme));
      if (!isBlocked) {
        originalHrefSetter.call(this, url);
      }
    }
  });
`;

// 在WebView中启用注入脚本
<WebView
  source={{ uri: 'https://your-ecommerce-url.com' }}
  onShouldStartLoadWithRequest={shouldStartLoad}
  injectedJavaScript={injectedJS}
  javaScriptEnabled={true}
/>

3. 平台特殊处理 #

Android端：拦截intent://协议

部分电商页面会使用intent://协议触发系统跳转，需要在拦截规则中补充这类地址的判断，比如：

const isBlocked = blockedTargets.some(target => {
  return currentUrl.includes(target) || 
         (currentUrl.startsWith('intent://') && currentUrl.includes('scheme=taobao'));
});

iOS端：处理Universal Links

如果电商网站配置了Universal Links，可能会直接唤起App，这时候同样可以通过onShouldStartLoadWithRequest拦截对应的域名或跳转路径，返回false阻止。

注意事项 #

• 定期更新拦截的Scheme列表，覆盖更多电商平台的专属协议
• 测试不同电商页面的跳转逻辑，确保没有遗漏的唤起方式
• 若需要允许部分跳转，可调整拦截规则，添加白名单逻辑

内容的提问来源于stack exchange，提问作者Đố Vui Hại Nào