Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, tenho uma página (pag2.html) que ao ser carregada exibe um texto na tela através do evento onload. Porém quando tento abrir esta pagina em uma div (div1) de outra página (pag1.html) a mensagem não é exibida. Desde já agradeço a ajuda.
Seguem abaixo os códigos:
Arquivo pag1.html
<!DOCTYPE HTML>
<HTML lang="pt-br">
<HEAD>
</HEAD>
<meta charset="utf-8">
<script src="javas.js" charset="utf-8"></script>
<body>
<input type="button" value="Carregar..." onclick="carregar()" >
<div id="div1"></div>
</body>
</HTML>
Arquivo pag2.html
<!DOCTYPE HTML>
<HTML lang="pt-br">
<HEAD>
</HEAD>
<meta charset="utf-8">
<script src="javas.js" charset="utf-8"></script>
<body onload="mensagem()">
<div id="div2"></div>
</body>
</HTML>
Arquivo javas.js
function mensagem()
{
var text = "Mensagem.";
document.getElementById("div2").innerHTML = text;
}
function carregar()
{
xmlreq = CriaRequest();
if(xmlreq)
{
xmlreq.onreadystatechange = function() { resultado("div1", "pag2.html"); };
xmlreq.open("POST", pagina, true);
xmlreq.send('');
}
}
function resultado(elemento, pagina)
{
if(xmlreq.readyState == 4)
{
var res = xmlreq.responseText;
document.getElementById(elemento).innerHTML = res;
xmlreq.abort();
}
else if(xmlreq.readyState == 1)
{
var mensagem = '<b>Carregando...</b>';
document.getElementById(elemento).innerHTML = mensagem;
}
}Não vai funcionar..... Porque?
O assunto é vasto e antigo, mas basicamente é porque viola as boas práticas de experiência do usuário especificadas pela w3.org/
Faça uma a respeito de requisições síncrona e assíncrona.... A propósito sua requisição aí é sícrona.
É possível fazer algo a respeito?
Sim:
Modo mais correto:
Você pode carregar o arquivo JS que contém a função já no index, passar um callback no ajax para quando o arquivo for carregado executar a função do aquivo JS.
Exemplo:
if (xmlreq.readyState == 4) {
minha_funcao_js();
Na gabiarra:
Usar o mesmo esquema do callback, mas passar os scripts do arquivo carregado para o elemento DOM onde foi carregado.
Veja isso: [https://github.com/Spell-Master/Ajax-JsNativo](https://github.com/Spell-Master/Ajax-JsNativo)
Mais uma coisa. Arquivo carregado por ajax não precisa e nem devem possuir cabeçalhos ou TAG html/body fica a dicaOlá.
Omar~,
Obrigado pela explicação e pela dica. Consegui compreender o motivo, mas ainda não consegui fazer funcionar.