基于PhoneGap开发Web应用：如何在手机浏览器而非应用内打开URL？

嘿，我来帮你搞定这个问题！在PhoneGap开发的HTML/JS应用里，让链接跳转到系统浏览器而不是应用内WebView打开，其实用对方法很简单，下面给你两种靠谱的实现方式：

这是官方推荐的方案，能精准控制哪些链接跳转到浏览器，步骤如下：

1. 先安装插件
   打开终端，进入你的项目根目录，运行这条命令：

cordova plugin add cordova-plugin-inappbrowser

2. 监听链接点击事件
   根据你的需求，有两种实现方式：

• 方式A：给特定链接标记类名
  如果你只想让部分链接跳转到浏览器，可以给这些<a>标签加个类名，比如class="external-link"，然后用JS监听点击：

document.addEventListener('DOMContentLoaded', function() {
  // 找到所有带external-link类的链接
  const externalLinks = document.querySelectorAll('.external-link');
  externalLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止应用内打开的默认行为
      const url = this.href;
      // _system 参数指定用系统浏览器打开
      window.open(url, '_system');
    });
  });
});

• 方式B：全局拦截所有外部链接
  如果想让所有http/https链接都跳转到浏览器，不用手动加类名，可以全局监听点击事件：

document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', function(e) {
    let target = e.target;
    // 向上查找，找到最外层的<a>标签
    while (target && target.tagName !== 'A') {
      target = target.parentNode;
    }
    if (target && target.href) {
      const url = new URL(target.href);
      // 判断是否为http/https外部链接（可根据需求调整判断逻辑）
      if (['http:', 'https:'].includes(url.protocol)) {
        e.preventDefault();
        window.open(url.href, '_system');
      }
    }
  });
});

这里的_system是关键参数，它会告诉PhoneGap调用设备的默认系统浏览器打开链接，而不是在应用内WebView加载。

如果你希望所有外部链接默认都用系统浏览器打开，可以修改项目根目录下的config.xml，添加以下配置：

<!-- 禁止在WebView中打开白名单内的URL -->
<preference name="OpenAllWhitelistedURLsInWebView" value="false" />
<!-- 允许导航到所有URL（根据你的需求调整白名单范围） -->
<allow-navigation href="*" />

不过这种方式是全局生效的，如果你有部分链接需要在应用内打开，就不太灵活，所以更推荐插件的方式。

• 测试时一定要用真机或模拟器，浏览器环境下window.open只会打开新标签页，看不到系统浏览器跳转的效果。
• 如果你用的是PhoneGap Build，需要在config.xml里声明插件，确保构建时能自动安装：

<plugin name="cordova-plugin-inappbrowser" spec="^5.0.0" />

（版本号可以根据官方最新版本调整）

这样设置后，你的应用链接点击就会直接跳转到手机默认浏览器啦，亲测有效！

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