jQuery Mobile não permite links internos

paulosergioduffpro · Janeiro 11, 2017

Estou criando esboço de aplicação em HTML 5 para rodar em dispositivo *mobile*.

No meu projeto, precisei usar diferentes versões do *jQuery* para os eventos funcionarem:

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

Usei funções como Animate e Swipe do *jQuery Mobile*. O problema é quando adiciono o *jQuery Mobile*, meus links internos param de funcionar. O console dá a seguinte mensagem:

> XMLHttpRequest cannot load

> file:///Users/nome-do-usuario/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.

Somente links externos funcionam. Obviamente que já pesquisei por aí. Mas nenhuma solução que se pareça com meu caso.

Código completo

<!-- language: lang-html -->


    <!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;
     ;
     }
    
     #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>

gabrieldarezzo · Janeiro 11, 2017

O Próprio erro informou que é CORS:

'Cross origin requests are only supported for protocol schemes: http,'

Como você esta tentando utilizar o jQuery Mobile?

é via cdn?

Numa aplicação que vai virar hibrido?

Na minha visão deveria ser instalado na sua pasta. (é jQuery Mobile + Cordova?)

https://www.html5rocks.com/en/tutorials/cors/

paulosergioduffpro · Janeiro 12, 2017

O Próprio erro informou que é CORS:

'Cross origin requests are only supported for protocol schemes: http,'

Como você esta tentando utilizar o jQuery Mobile?

é via cdn?

Numa aplicação que vai virar hibrido?

Na minha visão deveria ser instalado na sua pasta. (é jQuery Mobile + Cordova?)

https://www.html5rocks.com/en/tutorials/cors/

Estou criando uma pasta só para rodar o Jquery e estou chamando ele pelo <head> como script externo. Não estou usando o Cordova. Estou usando o componente WebView do Android Studio. Mas os testes não funcionam independente se estou rodando em desktop ou no dispositivo. Eu pesquisei sobre o Cross Origen Request, mas nada que me desse uma dica de como usar o Jquery Mobille sem que isso aconteça.

paulosergioduffpro · Janeiro 12, 2017

Na minha visão deveria ser instalado na sua pasta.

Acabo de colocar o Jquery na pasta raiz. Não rolou! Ainda tentando!

AndersonMamede · Janeiro 13, 2017

Como você está acessando o arquivo HTML no browser? Acesse sua aplicação através de um servidor web (apache, por exemplo) para utilizar o protocolo HTTP ao invés do FILE. O endereço que você acessa deve ser mais ou menos assim: http://localhost/teste/app.html, aí você não vai ter problema porque os links (como testeTouch.html) também irão usar o protocolo HTTP.

paulosergioduffpro · Janeiro 16, 2017

No meu caso, não posso colocar dentro de um servidor porque o objetivo é testar uma aplicação Mobile, em que os arquivos rodam localmente. De qualquer forma, obrigado a todos. Encontrei uma das soluções possíveis.

Solução:

O Jquery Mobile é um framework voltado para aplicações híbridas. Incluindo aplicativos Mobile. Com isso, algumas requisições são tomados certos cuidados, por este motivo o COR (Cross origin requests) não tem suporte a request externo. Existem algumas formas de solucionar isso, mas a que encontrei no meu caso foi criar uma função de redirecionamento dentro do JS da mesma pasta da aplicação.

Assim:


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

Referências:

http://stackoverflow.com/questions/12910813/jquery-mobile-error-loading-page

https://jquerymobile.com/

gabrieldarezzo · Janeiro 16, 2017

Acredito que o jqueryMobile roda em uma WebView, dispensando a necessidade de um servidor, concentrando tudo no aplicativo.

Com isso, algumas requisições são tomados certos cuidados, por este motivo o COR (Cross origin requests) não tem suporte a request externo.

Discordo com isso por dois fatores.

1 - Você não precisa fazer uma requisição externa (cdn ou algo do genero para integrar o JavaScript)

2- O suporte pode ser habilitado no jQuery Mobile (desde que o servidor + requisição estejam configuradas corretamentes)

http://stackoverflow.com/questions/14509084/cors-using-ajax-within-phonegapjquery-mobile-not-working-on-device-but-is-on-br

Então em algum lugar você deve ter um index.html da vida...

Ai nesse caso só adicionar no mesmo nível os arquivos externos.

\..
\public
-index.html
-page1.html
-page2.html
-another.js
-custom-scripting.js
\outras
--outra1.html
--outra2.html

index.html:

  .....
  <script src="custom-scripting.js"></script>
</body>

Entrar

Arquivado

jQuery Mobile não permite links internos

Recommended Posts

paulosergioduffpro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

paulosergioduffpro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

paulosergioduffpro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

AndersonMamede 88

Compartilhar este post

Link para o post

Compartilhar em outros sites

paulosergioduffpro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Não acha o Caminho da CLASS

Pergunta: Sexy Girls from your town - Living Women

Criação de projeto laravel

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante