IOS - html links not working - phone gap

StackOverflow https://stackoverflow.com/questions/23654742

  •  22-07-2023
  •  | 
  •  

Question

I have a pretty standard html file.

What is weird is that the app works on android, the html files work in browser in safari and on windows etc. Everything is fine. However when I go into iOS emulator, literally none of the links work. The purpose of the links are simply to navigate from page to page. I have no idea why they wouldn't work.

Can anyone work this out? I'm also not seeing any console errors.

Thanks

<!DOCTYPE HTML>
<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="stylesheet" href="fonts/fonts.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" href="css/jquery.sidr.dark.css" type="text/css">


</head>

<body class="sign-in">

<!-- PAGE -->
<div id="wrapper">
    <div class="page">

        <div class="container">

            <h1 class="big-logo"></h1>


            <!-- Sign in Form -->
            <section class="sign-in-form">

                <form id="login-form">

                    <div class="input-wrap">
                        <input type="text" id="username" placeholder="Email Address">
                        <input type="password" id="password" placeholder="Password">

                    </div>

                    <a class="btn btn-green" onclick="$('#login-form').submit();"> Sign In </a>

                </form>

            </section>

            <!-- Create Account -->
            <div class="first-time"> First time user? <a href="registration.html"> Create Account </a></div>
            <div class="forgot-password">
                <a href="forgot-password.html"> Forgot your password? </a>
            </div>
        </div>

        <!--// PAGE -->

    </div>
</div>
<script src="cordova.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/global.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jquery.sidr.js"></script>
<script src="js/iscroll-probe.js"></script>
<script src="js/touch.js"></script>
<script type="text/javascript" src="js/index.js"></script>


</body>
</html>

config.xml as requested:

    <?xml version='1.0' encoding='utf-8'?>
<widget xmlns:cdv="http://cordova.apache.org/ns/1.0"
    id="com.gladwinput.testApp"
    version="0.0.1"
    xmlns="http://www.w3.org/ns/widgets" >

    <name>
Test
    </name>

    <description>
    </description>

    <author
        email="apps@gladwinput.com"
        href="http://gladwinput.com" >
        David G
    </author>

    <content src="index.html" />

    <access origin="*" />

</widget>
Was it helpful?

Solution

Actually turned out to be an iScroll bug - it's buggy in the latest version and constantly listens for an ontouch, which meant it was overriding any links. Sorry about that folks!

OTHER TIPS

It's very simple, i think you have moved your file's[.html] to an group folder or someWhere else.

you need to place the .html files in "WWW" folder only, if you move your files to some other folder means then it will not work.

cut your forgot-password.html & registration.html files and paste them in the WWW directory it will work as coded.

You need to put the absolute url of your files.. for example 

<a href="/forgot-password.html"> Forgot your password? </a>

Notice the "/".

You need to put the file into www or any folder into www folder.. for example

www/user/forgot-password.html

The link will be:

<a href="/user/forgot-password.html"> Forgot your password? </a>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top