jQuery Mobile does not allow internal links

1

I'm creating HTML 5 application sketch to run on mobile device.

In my project, I needed to use different versions of jQuery for the events to work:

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

I used functions like Animate and Swipe of jQuery Mobile . The problem is when I add jQuery Mobile , my internal links stop working. The console gives the following message:

  

XMLHttpRequest can not load   file: ///Users/username/AndroidStudioProjects/WebViewOficial/app/src/main/assets/testeTouch.html.   Cross origin requests are only supported for protocol schemes: http,   date, chrome, chrome-extension, https, chrome-extension-resource.

Only external links work. Obviously I already researched there. But no solution that looks like my case.

Complete Code

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="appJS/arrastaEsquerda.js"></script>


    <style type="text/css">

    div:first-child {
opacity: .99;
}
        #header{
            /*position: absolute;*/

            background: #ccc;
            position: fixed;
            top: 10px;

        }

        html
{
  position:fixed;
  width:100%;
  height:100%;
}

     #quadro {
    position: fixed;
    background-color: #CCC;
    left: -250px;
    top: 0px;
    width: 250px;
    height: 100%;
    margin: 5px;

  }


   #fechaMenu {
    position: fixed;
    background-color: blue;
    top: 0px;
    right: -250px;
    width: 250px;
    height: 100%;
    opacity: 0.2;

  }



#menuAberto
            {
                position: fixed;
                top: 20px;
                left: 0px;
                background-color: #ccc;
            }

.clicavel{
    position: fixed;
    background-color: green;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    /*opacity: 0.3;*/
    background-color: green;
    bottom: 0px;

}

#clicavel1{

    left: 10px;
   /* background-image: url('layout-manual/botao1.png');*/
    background-repeat: no-repeat;

}

#clicavel2{

    left: 28%;
    background-image: url('layout-manual/botao2.png');
    background-repeat: no-repeat;
}

#clicavel3{

    right: 28%;
    background-image: url('layout-manual/botao3.png');
    background-repeat: no-repeat;
}

#clicavel4{
    right: 10px;
    background-image: url('layout-manual/botao4.png');
    background-repeat: no-repeat;
}

        .conteudo{
            width: 100%;
            align-content: center;
            align-self: center;
            left: 0px;

        }

        #sugestoes
                        {
                            position: relative;
                            width: 100%;
                            align-self: center;
                            background: #708090;
                            top: 200px;
                            overflow: scroll;

                        }
        #parceiros
                        {

                        position: absolute;
                        overflow: scroll;
                        width: 100%;
                        align-self: center;
                        background-color: yellow;
                        bottom: 70px;
                        height: 60px; 
                        left: 0px;
                        }

        #footer
                    {
                        position: fixed;
                        bottom: 5px;
                        width: 100%;
                        align-self: center;
                        /*background-color: blue;*/
                        height: 60px;
                        left: 0px;

                    }

        #banner
                    {
                        background-color: #ccc;
                        position: absolute;
                        top: 90px;
                        height: 120px;
                        overflow: scroll;
                    }

        #menu
                    {
                        position: fixed;
                        left: 0px;
                        top: 30px;
                        align-self: center;
                        /*background: #ccc;*/

                    }

        #logo
                    {
                        position: fixed;
                        left: 50%;
                        top: 80px;
                        /*background: #ccc;*/
                        margin-top:-50px;
                        margin-left:-50px;
                    }

        #pesquisaEcestinha
                    {
                        position: fixed;
                        right: 0px;
                        top: 35px;
                        /*background: #ccc;*/
                    }





    </style>
</head>
<body>
<div id="todaPagina">

<div id="navegacao"></div>

<div id="header">
    <div id="menu">

    <img src="img/botaomenu.png" id="right"></button>


<div id="fechaMenu" class="fechaMenu" ></div>

<div id="quadro" class="block">

</div>

    </div><div id="logo" align="center"><a href="http://www.google.com"><img src="img/logoHome50.png"></a></div><div id="pesquisaEcestinha" align="right"><img src="img/cestinhaBotao.png" width="50" height="50"><img src="img/pesquisaBotao.png" width="50" height="40"></div>
</div>

<content >

    <div id="banner" align="center" class="conteudo" >

        <img src="img/poster.png"></center>
    </div>
<div id="sugestoes" class="deslizante">
    <center><canvas id="myCanvas" width="180" height="200" style="border:1px solid #000000;">Conteudo</canvas></center>
      <div data-role="main" class="ui-content">

  </div>

</div>

</content>

<div data-role="page" id="pageone" id="parceiros">
  <div data-role="header">
  <center>
    <h1>Evento arrastar para os lados em Jquery!</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p style="border:1px solid black;margin:5px;">
    <canvas class="deslizante" width="300" height="300" style="border:1px solid #000000;">Para testar o evento, arraste o touch para os lados/p>
  </div>

  <h3>Para instalar, copie e cole as pastas do projeto na raiz, cole os scripts no head, e configure uma div com a id deslizante!</h3>



  <div id="sugestoes" class="deslizante">
  <center><canvas id="myCanvas" width="180" height="200" style="border:1px solid #000000;">Conteudo</canvas></center>
    </div>
 <!-- fim do

</div> <!-- fim da id navegacao -->

<div id="footer">
    <center>


<a href="testeTouch.html" id="clicavel1" class="clicavel"><img src="layout-manual/botao1.png"></a><!-- Primeiro botao -->

<canvas id="clicavel2" width="70" height="70" style="border:1px solid #87CEEB" class="clicavel"></canvas> <!-- Segundo botao -->
<canvas id="clicavel3" width="70" height="70" style="border:1px solid #87CEEB" class="clicavel"></canvas> <!-- Terceiro botao -->
<canvas id="clicavel4" width="70" height="70" style="border:1px solid #87CEEB" class="clicavel"></canvas> <!-- Quarto botao -->
<!-- canvas para melhor visualizacao em modelo
    <canvas id="myCanvasFooter" width="200" height="90" style="border:1px solid #000000;">
    </canvas>
    --></center>
</div>

<div id="menuEscondigo"></div>

</div>

<div id="flutuante" style="position: fixed; top: 10px; left: 30px;" onclick="animacaoMenuFecha()">FLUTUANTE3</div>

<script src="js/menu.js"></script>



</body>
</html>
    
asked by anonymous 11.01.2017 / 16:48

1 answer

1

Solution:

Jquery Mobile is a framework for hybrid applications. Including Mobile Applications. With this, some requests are taken care of, for this reason the COR (cross origin requests) does not support external request. There are a few ways to work around this, but the one I found in my case was to create a redirect function within JS from the same application folder.

So:

<script>
function mudaLink()
                        {
                            document.location.href = "seuLink.html";
                        }
</script>
<body>
<a href="javascript:mudaLink()">Seu texto</a>

References: link link

    
16.01.2017 / 18:36