PhoneGap中基础HTML页面链接点击无响应问题求助

这个问题我之前帮不少开发者解决过，核心是PhoneGap的安全限制在搞怪，咱们一步步来搞定它：

1. 先配置Content Security Policy（CSP） #

PhoneGap默认会限制外部资源的访问，你需要在index.html的<head>里添加CSP元标签，明确允许目标域名的访问。比如针对你的链接，你可以这样加：

<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' http://somesite.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval';">
</head>

• default-src 'self' http://somesite.com：允许加载自身资源和somesite.com下的所有资源
• style-src和script-src的设置是为了兼容基础的内联样式和脚本，避免额外报错

2. 使用InAppBrowser插件打开外部链接 #

仅仅配置CSP可能还不够，因为PhoneGap的WebView默认不会直接跳转外部链接，需要用官方的InAppBrowser插件来实现：

第一步：安装插件 #

在你的项目根目录下运行命令：

cordova plugin add cordova-plugin-inappbrowser

第二步：修改链接和添加脚本 #

把原来的链接改成触发JavaScript函数的形式，然后调用InAppBrowser打开链接：

<html>
<body>
  <a href="#" onclick="openExternalLink('http://somesite.com/page.php')">Click</a>

  <script>
    function openExternalLink(url) {
      // 用内置浏览器打开链接，_blank表示新窗口，location=yes显示地址栏
      window.open(url, '_blank', 'location=yes');
    }
  </script>
</body>
</html>

3. 旧版本PhoneGap/Cordova的额外配置（可选） #

如果你用的是较老的版本（比如Cordova 10之前），还需要在config.xml里添加导航白名单：

<allow-navigation href="http://somesite.com/*" />

如果需要临时测试所有外部链接（不推荐生产环境使用），可以写：

<allow-navigation href="*" />

这样一套操作下来，你的链接点击应该就能正常工作啦～

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