Como chamar um arquivo HTML de dentro de um JavaScript?

Front-end JavaScript
#1

Olá pessoal.

Tenho que chamar minha página HTML de dentro de um javascript. Tentei assim:

Fiz o HTML:

!DOCTYPE html>

  1. ATENÇÃO: Testando:

Teste fhfhfdhfhfhdfhdfh

Teste do padrão 

 <script src="Scripts/NovidadesTeste.js" ></script>//Arquivo javaScript

No final do arquivo faço referência ao meu arquivo de javascript.

Arquivo NovidadesTeste.js:

function buscarNovidades() { document.getElementByID(‘dvTeste’).innerHTML; } Não sei se o procedimento está correto ou está faltando alguma coisa. Tenho que chamar este procedimento na página principal do projeto , neste caso como faço , chamo o HTML ou o Javascript? Página principal: <asp:Content ID=“BodyContent” runat=“server” ContentPlaceHolderID=“MainContent”>

   <script type="text/javascript" src="Scripts/NovidadesRelat.js" ></script>

Neste caso estou chamando o javascript.

Obrigada. Flavia

#2

Sua questao está confusa, antes da parte técnica, defina o que precisa entregar de resultado pro usuário. Dependendo do que for a solução técnica pode ser mais simples.

#3

Sou iniciante e estou aprendendo bastante com os cursos da Alura.
Mas quero fazer o seguinte:

  1. Fazer um arquivo HTML com o texto a ser exibido na tela.
  2. Chamar este arquivo pelo JavaScript
  3. Na página principal do projeto preciso exibir este texto com as novidades do projeto.

Ficou mais claro?

Muito Obrigada.
Flávia

#4

Não, continua indo só pro lado técnico. Pensa primeiro na necessidade usuário, qual é o requisito funcional?

#5

Poxa, então realmente não sei com explicar. Preciso fazer exatamente o que foi descrito acima. Estou dando uma pesquisada a respeito.

Agradeço muito em tentar me ajudar.

#6

Quando se faz um projeto precisa definir os requisitos do usuário. Está fazendo um projeto de páginas e javascripts aleatórios sem saber especificar como deve ser o resultado pro usuário?

Exemplo: Usuario clica em um menu, o sistema abre um formulario, o usuário preenche informacoes e no final aperta um botao pro sistema client submeter as informacoes pro sistema servidor.

#7

Oi. Não estou fazendo um sistema do zero, estou mantendo um já existente.
Preciso que este javascript (que vai chamar minha pagina html)seja chamado na pagina principal do projeto. Ao logar no sistema é exibida uma página com um menu horizontal e uma parte em branco que deve ser exibido este texto.

Obrigada.
Flávia

#8

Mesmo sendo um sistema existe, precisa saber os requisitos do que está atendendo.

Se o usuario vai clicar em um link do menu horizontal e o sistema vai mostrar o resultado da requisicao no meio da tela, usa ajax.

#9

assim

vc consegue fazer isso com o DOM

vc não precisa ‘chamar um arquivo html’

o javascript pode criar ou usar um elemento que ja existe e adicionar um texto ou mesmo adicionar html.

o jQuery fazia bastante isso.

por exemplo, se vc tem esse javascript:

$("#test").html("<b>Hello world!</b>");

e esse html

<p id="test">QQ coisa</p>

o framework vai pegar o elemento de id test e vai substituir o conteudo por <b>Hello world!</b>

isso era moda sei la, 8 anos atras. hoje deve ter coisa melhor. e nem precisa usar jquery

var p = document.getElementById("test2");
p.innerHTML = "<b>boo</b>";

se o elemento existe vc pode substituir. se não existe vc precisa criar e anexar em algum ( no body por exemplo )

https://www.w3schools.com/jsref/met_document_createelement.asp

#10

Olá entendi perfeitamente o que disse, sendo que não quero substituir, neste exemplo que deu:

por exemplo, se vc tem esse javascript:

$("#test").html(“arquivoHtml.html”); // Gostaria de chamar exatamente como está em meu arquivo, até porque o texto a ser exibido é longo.

Desta forma:

var p = document.getElementById(“test2”);
p.innerHTML = “Aqui é possível pegar o conteúdo do arquivo HTML???”;

Muito Obrigada. Flávia

#11

ola

o que vc pode tentar fazer é adicionar um iframe para este arquivo. é mais chato mas da pra fazer

agora se vc precisa sempre adicionar em todas as paginas um certo conteudo estatico, vc pode tentar usar algum tipo de Server Side Include

assim, vc pode ler o conteudo do html usando ajax, mas eu temo que o resultado seja ruim.

#12

Na verdade preciso adicionar este conteúdo estático em apenas duas páginas.

#13

Teria uma idéia de uma solução mais simples?

#14

$('#suadiv').load('seuarquivo.html');

https://www.programcreek.com/2010/01/use-jquery-ajax-to-load-static-html-page-to-a-div-tag/

#15

Oi.

Tentei como vc disse:
No meu html coloquei a referência para JavaScript e neste fiz:

function carregarConteudo() {
$(’#minhaDiv’).load(‘novidades.html’);
} // Minha div carregando o arquivo.

Na página principal onde deve ser exibido o texto fiz referência ao javascript assim:

Não sei , basta fazer referência ao JavaScript?

Obrigada.
Flavia

#16

Na página principal onde tenho que chamar o texto, fiz o seguinte teste:

Ir Para a Página de Novidades
Quando clico no link aparece o texto.

Mas não posso clicar em nada, tenho que carregar o texto assim que a página for carregada.

Obrigada.
Flávia

#17

Resolvi fazer de uma outra forma: Vou fazer uma função em C# para ler meu arquivo HTML e vou carregá-lo no load da página.

#18

Fiz assim:

private string LeArquivo()
{
var enderecoDoArquivo = “C:/temp/teste.html”;

        string arquivoHtml = File.ReadAllText(enderecoDoArquivo);

        return arquivoHtml;
    }

Chamei no load da página e funcionou perfeitamente.
A única coisa que achei ruim é que tenho que especificar o local do arquivo, não consegui fazer de outra maneira. Estou pesquisando.

Muito Obrigada.
Flávia

#19

Depende a partir de onde você quer pegar. Se for a partir do caminho da própria aplicacao:

var caminhoRaiz = Server.MapPath("~/");

#20

Funcionou.

Muito Obrigada.
Flavia

1 curtida