-1

Vou dar um pequeno exemplo de um problema na qual estou enfrentando. Estou trabalhando em uma aplicação onde basicamente consiste em inúmeras telas diferentes com um menu lateral interligando-as. Porém, parei pra pensar que, por exemplo, tiver 50 telas diferentes, terei de mudar o menu lateral em 50 arquivos. Teria alguma maneira de transformar esse menu lateral em um único arquivo HTML(separado), e inclui-lo de alguma forma nas outras telas, a fins de evitar problemas futuros?

(OBS: Tentei utilizar o método iframe, porem acabou separando-o em 2 bodys diferentes)

5
  • deve usar uma estrutura modular, onde o menu lateral seja sempre o mesmo, e mude apenas a parte variável... pode utilizar algum template MVC ou SPA (single page application) que facilmente tratam isso Commented 11/11/2022 às 14:33
  • @RicardoPontual teria outra forma de fazer? É que MVC e SPA não conheço (dei uma pesquisada porem não consegui encontrar algo do tipo!) Commented 11/11/2022 às 18:06
  • nao é possivel, pelo javascript vc consegue limpa um arquivo html e criar outra estrutura no mesmo arquivo sem apagar na do arquivo Commented 13/11/2022 às 5:01
  • A fins de teste (gambiarra), vc poderia separar um elemento no HTML que irá receber os HTML dinamicamente. No JS, com o fetch vc pode fazer a requisição do arquivo HTML dinâmico sempre que algum link for clicado, onde ao invés de trocar o link, vc insere o resultado da requisição no innerHTML do elemento. Indo pra vida real, normalmente o MVC é criado usando uma linguagem back-end, mas se vc quiser fazer isso apenas usando do front-end, dá uma pesquisada em ReactJS ou Angular. Commented 13/11/2022 às 7:05
  • bom eu achei uma forma "simples" de usar um método MVC, pelo pelo PHP apenas dando um include, separando a parte do código em outra pasta! Commented 16/11/2022 às 12:17

2 Respostas 2

-1

O jquery tem a fução load que basicamente é um ajax. Ele vai fazer um request, pegar o conteúdo e inserir no elemento. No exemplo, você só precisa substituir o link (https://jsonplaceholder.typicode.com/todos/1) pelo caminho do seu html, ex: $("#header").load("templates/header.html");

$("#placeholder").load("https://jsonplaceholder.typicode.com/todos/1");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="placeholder">carregando...</div>

-2

Infelizmente, não existe uma maneira fácil e segura de se fazer isso. Como os colegas citaram, uma das maneiras é improvisar uma injeção de conteúdo via Javascript. Isso consiste basicamente em ler um arquivo HTML (usando o JS) e injetar seu conteúdo para dentro de um container dentro do arquivo principal.

Então, por exemplo, você pode ter um arquivo footer.html para o rodapé, lê-lo e injetar seu conteúdo na página alvo, digamos index.html. Veja:

No index.html:

<HTML>
  <head>
      <title>Exemplo de injeção de HTML</title>
  </head>

  <body>
      <p>Parágrafo dentro do index</p>
      <footer id="footer-container"></footer>
  </body>

  <script src="index.js"></script>
</HTML>

No footer.html:

<div id="footer-content" style="background-color: blue; width: 50vw; height: 10vh;" />

E finalmente no index.js:

async function loadFooter() {
  const fileRequest = await fetch('footer.html')
  const footerText = await fileRequest.text()
  document.getElementById('footer-container').innerHTML = footerText
}

loadFooter()

Parabéns, você acabou de "modularizar" páginas HTML. Nem preciso dizer que isso não passa nem perto de ser uma alternativa boa, mas isso é porque o desenvolvimento web estático é bem rudimentar mesmo. Por isso, tem sido substituído por tecnologias mais modernas, como o React ou o Vue.

Tem outras opções também, como montar a página no back-end. Acaba sendo tecnicamente mais correto, já que você tem linguagens e bibliotecas específicas para fazer isso. Desse jeito, você montaria todo o conteúdo de uma página no próprio servidor, o que abre muitas portas para modularidade e outros benefícios. Mas, novamente, isso vai totalmente contra a tendência do desenvolvimento web (e do bom senso), já que você dificilmente conseguirá otimizar a visualização da sua página de acordo com o dispositivo que esteja visualizando.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .