Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
>
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.
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>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">// 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>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>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.
<!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" />
<div id="target"></div>
<script type="text/javascript">
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>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?
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 ?
>
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?Você não pode duplicar ID no HTML. Para isso use classes.
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?
Cara, qual é essa da gambiarra do script?
se você fizer ajax, vai ser muito mais fácil de controlar esse comportamento.
>
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...
Poste o conteúdo desse arquivo php.
Vou montar o ajax para ti.
>
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...
Posta o arquivo:
show.php
>
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?
Sem acesso ao show.php não dá pra fazer.
Sem acesso ao show.php não dá pra fazer.
E via script normal não tem como fazer tbm, apenas via ajax? Esse arquivo é criptografado, não consigo ver o código dele.
Aquele script que eu personalizei funcionou como eu queria, porém ele ta carregando junto com a página.. Não tem como modificar aquele la?
no evento window.onload vc dispara a requisição que carrega esse script ai.
assim ele só vai ser carregado depois da página.