jQuery Mobile does not allow internal links

Asked

Viewed 154 times

1

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

In my project, I needed to use different versions of jQuery for 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 from jQuery Mobile. The problem is when I add jQuery Mobile, my internal links stop working. The console gives the following message:

Xmlhttprequest cannot load file://Users/name-of-user/Androidstudioprojects/Webviewoficial/app/src/main/Assets/testeTouch.html. Cross origin requests are only supported for Protocol schemes: http, data, Chrome, Chrome-Extension, https, Chrome-Extension-Resource.

Only external links work. Obviously I’ve already searched 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>
  • How and where you reference testeTouch.html?

  • No footer. I put the full code in the post edition

  • Weird. I have no idea what that might be. + 1.

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 COR (Cross origin requests) does not have external request support. There are some ways to solve this, but the one I found in my case was to create a redirect function within the JS of the same application folder.

Thus:

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

References: https://stackoverflow.com/questions/12910813/jquery-mobile-error-loading-page https://jquerymobile.com/

Browser other questions tagged

You are not signed in. Login or sign up in order to post.