CODEWITHSUNDEEP
androidhtmlcordovahyperlink
user2104321
user2104321

Reputation: 17

Link not working properly on my HTML5 app

I have been going around and around and around, trying to apply as many different solutions as possible, trying to solve this problem by myself. The fact is that I cannot!

I am developing a very simple app in HTML5 on Adobe PhoneGap. The app is only a list of links that the user should click and access to the respective websites. Problem? The problem is that the websites are opening on the app and not on the browser. I already tryed everything I knew... Set target _blank, applied this solution, this one, this one and this one. I've been googling also, but the results are exactly the same: no solution for my problem.

There must be something that I am doing wrong, and right now I don't think I have the discernment to see what it is! And it is driving me crazy... Here is the code:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>Northern Landscape APP</title>
        <meta name="description" content="Northern Landscape APP - With this APP you can keep up with the latest news of our group: Features, Group Messages, new magazine issues and more!" />
        <meta name="author" content="LFS" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->

        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

        <link rel="stylesheet" href="style.css">

        <script type="text/javascript">
  $('.link').live('tap', function() {
    url = $(this).attr("rel");   
    loadURL(url);
});

function loadURL(url){
    navigator.app.loadUrl(url, { openExternal:true });
    return false;
} 
        </script>

    </head>

    <body>
        <div id="contentor">

            <header>

            </header>

            <nav>

            <div id="cabeca">
              <img src="imgs/cabecalho.png"> 
            </div>

            <br>
            <br>
            <br>
            <div id="botoeswraper">

              <div id="linha1">

                <div id="b1">
                  <div id="icone"><img src="imgs/logo_compus.png"></div>
                  <div id="texto">
                  <a href="#" class='link' rel='http://www.northernlandscape.org'>Official Website</a> </div>
                </div>

              </div>

              <div id="linha2">

                <div id="b2">
                  <div id="icone"><img src="imgs/rblogo.png"></div>
                  <div id="texto">
                  <a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape'>Redbubble group</a> </div>
                </div>

              </div>

              <div id="linha3">

                <div id="b3">
                  <div id="icone"><img src="imgs/groupmsg.png"></div>
                  <div id="texto">
                  <a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape/forums/7330'>Group messages</a> </div>
                </div>

               </div>

               <div id="linha4">

                 <div id="b4">
                  <div id="icone"><img src="imgs/issues.png"></div>
                  <div id="texto">
                   <a href="#" class='link' rel='http://www.northernlandscape.org/alli.php'>All NL magazine issues</a> </div>
                 </div>

               </div>

               <div id="linha5">

                 <div id="b5">
                   <div id="icone"><img src="imgs/tweeter.png"></div>
                   <div id="texto">
                   <a href="#" class='link' rel='https://twitter.com/NL_host'>Check us on Tweeter</a> </div>
                 </div>

              </div>

              </div>

            </nav>

<p>&nbsp;</p>
<p>&nbsp;</p>

            <footer>
                <p>
                    NL APP version 1.0 - Developed by LFS&copy; 
                </p>
            </footer>
        </div>
    </body>
</html>

I am most appreciated for any help that I can get...

Upvotes: 1

Views: 646

Answers (1)

Abel8658
Abel8658

Reputation: 25

I have done the changes below and each one works for me.

<!-- Opens in new tab -->
<a href="http://www.northernlandscape.org" target="_blank">Official Website</a>

<!-- Opens in new window -->
<a href="#" onClick="window.open('http://www.redbubble.com/groups/northern-landscape', '_system', 'location=yes');">Redbubble group</a>

Upvotes: 1

Related Questions