Pegando informações de uma pagina e deixando na página principal

11 respostas Resolvido
html5javascript
RNG

Olá pessoal tudo bom? então estou tendo problemas para pegar informações de uma página e imprimir as informações em uma página principal, se vocês puderem me ajudar fico muitoo agradecido, segue o código:

<!DOCTYPE html>
 <html lang="pt-BR">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Exercicios HTML</title>
 </head>
 <body>
     <header>
        <h1>exercicios HTML</h1>
     </header>
     <nav>
         <a href wm-nav="exercicios/teste.html">00 - teste</a>|
         <a href wm-nav="exercicios/temp.html">sem tempor irmao</a>
     </nav>
     <section id="conteudo"></section>
     <footer>
         <br>
         curso de web moderno
     </footer>
     <script>
         document.querySelectorAll('[wm-nav]').forEach(link => {
         const conteudo = document.getElementById('conteudo')
             
             link.onclick = function(e){
                 e.preventDefault()
                 fetch(link.getAttribute('wm-nav'))
                     .then(resp => resp.text())
                     .then(html => conteudo.innerHTML = html)
             }
         })
     </script>
 </body>
 </html>

11 Respostas

RogerPHP

Se não estou enganado vc precisa de um servidor http para conseguir obter o arquivo via protocolo http, olha o erro vc está tentando acessar via protocolo file.

RNG

Olá amigo, eu to usando um servidor, baixei o http-server, mas mesmo assim nao está fazendo o acesso

RogerPHP

Fiz um teste aqui com o seu código e funcionou usei o http-server, criei a pasta exercicios e coloquei os dois arquivos (teste.html e temp.html dentro).
Vc verificou o caminho dos arquivos !!

Qual erro que dá ?

<!DOCTYPE html>
 <html lang="pt-BR">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Exercicios HTML</title>
 </head>
 <body>
     <header>
        <h1>exercicios HTML</h1>
     </header>
     <nav>
         <a href wm-nav="exercicios/teste.html">00 - teste</a>|
         <a href wm-nav="exercicios/temp.html">sem tempor irmao</a>
     </nav>
     <section id="conteudo"></section>
     <footer>
         <br>
         curso de web moderno
     </footer>
     <script>
         document.querySelectorAll('[wm-nav]').forEach(link => {
         const conteudo = document.getElementById('conteudo')
             
             link.onclick = function(e){
                 e.preventDefault()
                 fetch(link.getAttribute('wm-nav'))
                     .then(resp => resp.text())
                     .then(html => conteudo.innerHTML = html)
             }
         })
     </script>
 </body>
 </html>
RNG

Não é bem um erro, quando eu clico no link do “00-teste” por exemplo, acontece nada, quando eu abro o console do navegador, la que mostra as mensagens de erro, são esses aqui ó

.
eu deixo rodando o servidor, mas abro a página pelo arquivo, seria isso? pois quando aparece um endereço no terminal, nao consigo acessar por la.

RogerPHP

Starta o servidor na raiz onde está o arquivo html, depois vai no navegador e digita localhost:8080, não abre o index como file se não, não dá certo.
Acho que vc está abrindo como file pela sua url ali na foto do lado esquerdo.

RogerPHP

RNG

Eu fiz isso e mesmo assim não retorna resultado pelo localhost:8080

RogerPHP

Tentou rodar em outro navegador !!

RogerPHP

Abre o console para ver se o que diz !! nesta imagem do opera ai !! a outra não está !!

RNG

Olá amigo, agora está rodando normalmente, fui ver e era meio que um erro na compatibilidade do http server, foi resolvido através do comando: npm install -g [email protected]
logo após consegui acessar pelo “localhost:8080”
Senhor te agradeço muito por me ajudar, ainda mais em um horário como esse que já é bem tarde, muito obrigado e tenha uma ótima noite!!

RogerPHP
Solucao aceita

Se puder marcar como resolvido obrigado tmj !! Boa noite.

Criado 22 de agosto de 2019
Ultima resposta 22 de ago. de 2019
Respostas 11
Participantes 2