<a> 标签不适用于科尔多瓦应用程序答案

【问题标题】：<a> tags not working for cordova app<a> 标签不适用于科尔多瓦应用程序
【发布时间】：2018-08-20 20:39:49
【问题描述】：

我正在制作一个 Cordova 应用程序，该应用程序具有应该启动到外部浏览器的链接的按钮。我但是，当我为 Android 构建应用程序或使用该应用程序连接到我的托管项目时，链接不起作用。当我尝试单击按钮或标签时，我看不到动画，也没有任何反应，但它在我的 PC 浏览器上运行良好。我尝试查找此内容，发现对配置文件或新插件的更改可能导致这些标签不起作用，但我的 config.xml 看起来应该如此，我将 inappbrowser 插件重新安装/降级为我在旧版本上使用过的版本工作项目。我怎样才能弄清楚我做错了什么？

我的 config.xml：

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.example.bookapp" version="1.0.0">
  <name>book app</name>
  <description>
        app
    </description>
  <author email="email" href="website">
        author
    </author>
  <platform name="android">
    <icon density="mdpi" src="www/res/mipmap-mdpi/ic_launcher.png"/>
    <icon density="hdpi" src="www/res/mipmap-hdpi/ic_launcher.png"/>
    <icon density="xhdpi" src="www/res/mipmap-xhdpi/ic_launcher.png"/>
    <icon density="xxhdpi" src="www/res/mipmap-xxhdpi/ic_launcher.png"/>
    <icon density="xxxhdpi" src="www/res/mipmap-xxxhdpi/ic_launcher.png"/>
  </platform>
  <content src="index.html"/>
  <access origin="*"/>
  <plugin name="cordova-plugin-statusbar" spec="^2.4.2"/>
  <plugin name="cordova-plugin-network-information" spec="^2.0.1"/>
  <plugin name="cordova-plugin-local-notification" spec="^0.9.0-beta.2"/>
  <plugin name="cordova-plugin-screen-orientation" spec="^3.0.1"/>
  <plugin name="cordova-plugin-inappbrowser" spec="^2.0.2"/>
  <engine name="android" spec="~7.0.0"/>
  <engine name="browser" spec="^5.0.3"/>
  <engine name="ios" spec="^4.5.4"/>
</widget>

我的 html 文档带有损坏的链接：

 <main>
  <section class="dynamic-card">
   <ul>
    <li>
     <a class="contact-link website waves-effect waves-light btn" href="#">
      <span class="network-name">
       email
      </span>
     </a>
    </li>
    <li>
     <a class="contact-link email waves-effect waves-light btn" href="#" onclick="website()">
      <span class="network-name">
       website
      </span>
     </a>
    </li>
    <li>
     <a class="contact-link waves-effect waves-light btn facebook" href="#" onclick="facebook()">
      <span class="network-name">
       Facebook
      </span>
     </a>
    </li>
    <li>
     <a class="contact-link twitter waves-effect waves-light btn" href="#" onclick="twitter()">
      <span class="network-name">
       Twitter
      </span>
     </a>
    </li>
    <li>
     <a class="contact-link instagram waves-effect waves-light btn" href="#" onclick="instagram()">
      <span class="network-name">
       instagram
      </span>
     </a>
    </li>
   </ul>
  </section>
 </main>

就像我说的链接在 Chrome 上的行为正常，但是一旦我在手机上得到它，链接的行为就像没有 href 属性或单击/悬停动画的按钮。

【问题讨论】：

您的 index.html 中是否有 Content-Security-Policy 元标记？如果是这样，请在问题中提供。还要提供 website()、facebook()、twitter() 或 instagram() 函数的代码，因为这是重要的部分

标签： cordova cordova-plugins

【解决方案1】：

cordova 应用程序中的<a> 标记无法正常工作，您必须使用 InAppBrowser，使用 JavaScript 调用 window.open 并将目标参数设置为 _system，根据 InAppBrowser 文档：

<a href="#" onclick="window.open('http://www.google.com', '_system');">Google</a>

这会起作用，但为了更好地练习，拦截所有链接及其点击事件并调用 window.open 方法，并将参数作为从 href 属性读取的链接。

要安装 InAppBrowser 插件，请执行以下命令。这是必须执行的步骤才能完成这项工作。

cordova plugin add cordova-plugin-inappbrowser

【讨论】：