Carregar javascript

Igor José · Setembro 4, 2015

Olá, estou precisando criar uma script que faça o seguinte na página:

Tenho a seguinte página:

index.php

<div><script language="javascript" src="https://meudominio.com/show.php?valor=x1"></script></div>

O problema é que quando a página index.php é acessa ele carrega esse script junto..

Quero saber como eu poderia fazer para que, quando a página for acessada esse script seja mostrado somente depois de ter carregado a página.

Algo em ajax por exemplo, onde ficaria uma imagem de carregando até aparecer o valor. Alguém sabe como fazer isso?

William Bruno · Setembro 4, 2015

no evento window.onload vc dispara a requisição que carrega esse script ai.

assim ele só vai ser carregado depois da página.

Igor José · Setembro 8, 2015

no evento window.onload você dispara a requisição que carrega esse script ai.

assim ele só vai ser carregado depois da página.

Hum, não entendo nada de programação. Conhece algum script pronto que faz isso, para eu personalizar?

Alguém pode disponibilizar algum script que faça isso? Preciso com muita urgência.

William Bruno · Setembro 8, 2015

Exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<img src="http://cdn.desktopwallpapers4.me/wallpapers/cartoons/1920x1080/3/29934-garfield-1920x1080-cartoon-wallpaper.jpg" />

<script type="text/javascript">
window.addEventListener('load', function() {
  var script = document.createElement('script');
  script.src = 'http://code.jquery.com/jquery-1.11.3.min.js';
  document.body.appendChild(script);
});
</script>
</body>
</html>

O jQuery só vai ser baixado após a imagem.

Igor José · Setembro 8, 2015

Obrigado pela ajuda, na verdade esse não funcionou como preciso.

Precisava de algo assim:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<div>

<!-- imagem exibia antes de carregar o script -->
<img src="xxx">

<!-- script exibido depois de carregar a pagina fazendo com que a imagem acima desapareça -->
<script language="javascript" src="https://meudominio.com/show.php?valor=x1"></script>

</div>

<script type="text/javascript">
// função para carregar o script dentro da DIV somente após carregar a página..

// enquanto a página nao e carregada completamente, é exibida a imagem de carregando dentro da div..Apos carregar a página a imagem some e carrega o script.
</script>
</body>
</html>

Isso é possível?

William Bruno · Setembro 8, 2015

Cara, não sei se entendi.. vamos lá.

Tem um loading.. ele aparece e fica rodando..

ai o resto da página carrega. Quando termina de carregar, o loading desaparece, e faz download de um script.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<img src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif" id="loading" />

<img src="http://cdn.desktopwallpapers4.me/wallpapers/cartoons/1920x1080/3/29934-garfield-1920x1080-cartoon-wallpaper.jpg" />

<script type="text/javascript">
window.addEventListener('load', function() {
  document.getElementById('loading').style.display = 'none';

  var script = document.createElement('script');
  script.src = 'http://code.jquery.com/jquery-1.11.3.min.js';
  document.body.appendChild(script);
});
</script>
</body>
</html>

Igor José · Setembro 8, 2015

Hehe, é quase isso, só que em vez de fazer o download ele deve exibir o script direto na página.

Nesse exemplo que eu citei:

<script language="javascript" src="https://meudominio.com/show.php?valor=x1"></script>

Quando esse script é adicionado na pagina ele exibe um texto onde ele foi inserido. No exemplo acima, quando adicionado dentro de uma div, ele vai retornar o texto: "abc-exemplo".

Esse script não é um arquivo JS para fazer funcionar algo na página, ele é apenas para retornar um texto de acordo com o valor escolhido.

William Bruno · Setembro 8, 2015

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

window.addEventListener('load', function() {

document.getElementById('loading').style.display = 'none';

var script = document.createElement('script');

script.src = 'https://meudominio.com/show.php?valor=x1';

document.getElementById('target').appendChild(script);

});

</script>

</body>

</html>

Igor José · Setembro 9, 2015

Rapaz, era isso mesmo, eu fiz a personalização aqui, ficou assim:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<ul> 
	<li>
    <img src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif" id="loading" />
    <span id="target">R$ <script language="javascript" src="https://meudominio.com/show.php?valor=x1"></script> /mes</span>
    </li>
    
    <li>
    <img src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif" id="loading" />
    <span id="target">R$ <script language="javascript" src="https://meudominio.com/show.php?valor=x2"></script> /mes</span>
    </li>
</ul>

<script type="text/javascript">
window.addEventListener('load', function() {
  document.getElementById('loading').style.display = 'none';

  var script = document.createElement('script');
  document.getElementById('target').appendChild(script);
});
</script>
</body>
</html>

Porém ocorreram dois problemas, primeiro que a imagem do loading some no primeiro <li> e no segundo ela não some, fica aparecendo.

Segundo é que o script é carregado junto com o carregamento da página, preciso que ele seja exibido somente após carregar toda a página, com todos os javascripts do <head>.

Alguma ideia?

William Bruno · Setembro 9, 2015

Da forma que eu fiz, é apenas um loading, e não um loading por imagem.

Você quer um por imagem ? ai é outra coisa.

O script só é carregado após a página. Pq você achou que não ?

Igor José · Setembro 9, 2015

Da forma que eu fiz, é apenas um loading, e não um loading por imagem.

Você quer um por imagem ? ai é outra coisa.

O script só é carregado após a página. Pq você achou que não ?

Sim, é que são muitos itens, então vai ter várias <li> com a mesma imagem de loading, só o script que vai mudar na URL.

Eu achei estranho por que quando a página ta carregando, o script já retorna o valor na página sem esperar carregar todos os javascripts da página. Seria legal que tivesse como colocar um tempo para ele exibir o script, como por exemplo 2 segundos..

Da forma que eu fiz, é apenas um loading, e não um loading por imagem.

Você quer um por imagem ? ai é outra coisa.

O script só é carregado após a página. Pq você achou que não ?

Eu teria que alterar essa parte do código para funcionar corretamente?

var script = document.createElement('script');document.getElementById('target').appendChild(script);

Da forma que eu fiz, é apenas um loading, e não um loading por imagem.

Você quer um por imagem ? ai é outra coisa.

O script só é carregado após a página. Pq você achou que não ?

Fiz uma modificação pesquisando aqui, e consegui deixar assim:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body><ul> 	<li id="ocultar">    <div id="mostrar" style="display:none">R$ <script language="javascript" src="https://meudominio.com/show.php?valor=x1"></script> /mes</div>    </li>        <li id="ocultar">    <div id="mostrar" style="display:none">R$ <script language="javascript" src="https://meudominio.com/show.php?valor=x2"></script> /mes</div>    </li></ul><style type="text/css"> #ocultar {background:url (icone.gif)}</style><script type = "text/javascript">  window.addEventListener('load', function() { 	document.getElementById("ocultar").style.background = "none";	document.getElementById("mostrar").style.display = "block";});</script></body></html>

Ele funcionou como eu queria, porém só funciona para um <li>, para outros li a imagem fica aparecendo e não mostra o conteúdo da <div>. Sabe o que pode ser?

William Bruno · Setembro 10, 2015

Você não pode duplicar ID no HTML. Para isso use classes.

Igor José · Setembro 10, 2015

Você não pode duplicar ID no HTML. Para isso use classes.

Pois é, eu tentei com classes mas ai não funciona, usei dessa forma:

<script type = "text/javascript">  window.addEventListener('load', function() { 	document.getElementsByClassName("ocultar").style.background = "none";	document.getElementsByClassName("mostrar").style.display = "block";});</script>

<li class="ocultar">    <div class="mostrar" style="display:none">R$ <script language="javascript" src="https://meudominio.com/show.php?valor=x1"></script> /mes</div></li>

Dessa forma ele fica sempre exibindo a imagem e não executa o script. Alguma outra sugestão?

Alguém ai, alguma sugestão?

William Bruno · Setembro 10, 2015

Cara, qual é essa da gambiarra do script?

se você fizer ajax, vai ser muito mais fácil de controlar esse comportamento.

Igor José · Setembro 11, 2015

Cara, qual é essa da gambiarra do script?

se você fizer ajax, vai ser muito mais fácil de controlar esse comportamento.

Já sofri para fazer essa "gambiarra" imagina fazer um em ajax, que não entendo nada..

Sabe algum exemplo? ou sabe o nome disso para eu pesquisar?

Cara, qual é essa da gambiarra do script?

se você fizer ajax, vai ser muito mais fácil de controlar esse comportamento.

Ai William consegui fazer de uma outra forma, eu substitui apenas o script:

<script type="text/javascript">  $(window).load(function() {	$('.ocultar').css("background", "none");	$('.mostrar').css("display", "block");})</script>

E ai,você acha que fica bom assim? Pelo que testei ele funcionou bem.. Continua sendo uma gambiarra?

Edit.: Não funcionou bem não, fiz desa forma porém os scripts dentro das div são carregados junto com a página. O negócio difícil da p****.

Alguma outra dica meu amigo? Desculpe postar tantos tópicos, e que realmente preciso fazer isso funcionar...

William Bruno · Setembro 11, 2015

Poste o conteúdo desse arquivo php.

Vou montar o ajax para ti.

Igor José · Setembro 11, 2015

Poste o conteúdo desse arquivo php.

Vou montar o ajax para ti.

Poxa cara valew mesmo.. Então o php é o mesmo do exemplo, veja:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<ul> 
<li>
    <span>R$ <script language="javascript" src="https://meudominio.com/show.php?valor=x1"></script> /mes</span>
 </li>
    
 <li>
    <span>R$ <script language="javascript" src="https://meudominio.com/show.php?valor=x2"></script> /mes</span>
</li>
</ul>

</body>
</html>

Deixei ele limpo sem scripts e sem as classes...

William Bruno · Setembro 11, 2015

Posta o arquivo:

show.php

Igor José · Setembro 14, 2015

Posta o arquivo:

show.php

Esse ai eu não tenho acesso, é criptografado de um sistema.. Mas quando ele é carregado na página ele só exibe um valor, por exemplo: 39,90

Posta o arquivo:

show.php

Você precisaria de acesso a esse arquivo para funcionar?

Posta o arquivo:

show.php

Eae Bruno, conseguiu algo ou pode me dizer qual o nome desse script para eu pesquisar?

William Bruno · Setembro 14, 2015

Sem acesso ao show.php não dá pra fazer.

Arquivado

Carregar javascript

Recommended Posts

Igor José 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Igor José 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Igor José 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Igor José 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Igor José 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Igor José 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Igor José 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Igor José 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Igor José 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Igor José 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501