<a> tags not working for cordova app

时间:2018-08-20 20:39:49

标签: cordova cordova-plugins

I am making a Cordova app that has buttons that are supposed to launch a link to the external browser. I However when I build the app for Android or use the app to connect to my hosted project, links don't work. When I try clicking on a button or a tag I don't see my animation and nothing happens but it workes fine on my PC's browser. I tried looking this up and found that changes to the config file or new plugins can cause these tags do not work but my config.xml looks like it's supposed to and I reinstalled/downgraded the inappbrowser plugin to a version that I have used on older working projects. How can I figure out what I'm doing wrong?

My 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>

My html document with the broken links:

 <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>

like I said the links behave normally on Chrome but once I get it on my phone the links behave like buttons without a href attribute or a click/hover animation.

1 个答案:

答案 0 :(得分:0)

enum标签在cordova应用程序中无法正常工作,您必须使用InAppBrowser,使用JavaScript调用window.open,并将目标参数设置为_system(根据InAppBrowser文档):

<a>

这将起作用,但是为了更好地实践,请拦截所有链接及其单击事件,并调用从href属性中读取的参数作为链接的window.open方法。

要安装InAppBrowser插件,请执行以下命令。为了完成这项工作,必须执行此步骤。

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