0

Como faço para ao carregar um script em uma pagina, o resultado apareça em uma div?

Exemplo:

<script type="text/javascript">

/*
   conteúdo do script
*/

</script>

<div id="script" class="000000"></div>

O objetivo é que o script ao ser carregado na pagina, o seu resultado apareça onde a div estiver localizada.

Eu possuo um exemplo aqui:

<div id="video" class="UJAwNkhbYWM"></div>

<iframe width="854" height="510" ID="caixa" frameborder="0" allowfullscreen></iframe>

<script>
var video = $("#video").attr('class');
$('#caixa').attr('src', "https://www.youtube.com/embed/" + video);
</script>

Com esse código é possível fazer isso com um vídeo do Youtube, porem gostaria de executar o mesmo com um script. Tentando esclarecer um pouco mais....

Vejamos o exemplo do Lightbox que é usado para visualizar imagens. Esse trecho do script:

$("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']").fancybox();

Indica que ao carregar o script, e ele encontrando imagens com o final, .jpg, .png e outros ele vai fazer o efeito desejado.

No caso de um script eu queria que ele ao ser executado ele o faça em uma div especifica.

Tipo ele encontra a imagem .png, mas ele vai mostra ela na Sidebar por exemplo, por que o script encontrou a div ali.

4
  • Vc quer inserir o resultado de um script ou o código de um script que foi executado? Commented 17/08/2014 às 23:50
  • O resultado, o script execulta uma função, e o resultado aparece na div
    – Endou
    Commented 17/08/2014 às 23:52
  • 1
    Isso é muito relativo, se o tal script estiver simplesmente imprimindo direto onde ele estiver, basta coloca-lo dentro da div normalmente, mas se ele estiver modificando o conteúdo de um elemento previamente definido, você pode nomear a div com o mesmo nome, ou identificar o elemento que o script utilizou ou criou e mover o conteúdo para o div usando jquery. Commented 18/08/2014 às 1:06
  • Cnseguiu pôr isto a funcionar?
    – Sergio
    Commented 31/10/2014 às 16:48

1 Resposta 1

3

A resposta ao seu problema e a resposta à sua pergunta são, a meu ver, ligeiramente diferentes.

Para carregar um script na página precisa de uma string com o conteudo do script, depois tem de criar um elemento script que vai ser adicionado à página e aí ele corre diretamente.

Exemplo:

var scriptString = "var video = 'uT3SBzmDxGk';$('#caixa').attr('src', 'https://www.youtube.com/embed/' + video);";
var script = document.createElement('script');
script = $(script).append(scriptString);
$('#novoScript').html(script); // podia tambem ser "$(document.body).append(script);"

Demo: http://jsfiddle.net/p0pahbep/2

Para mudar o video dentro da iFrame não precisa de ter um novo script a ser adicionado à página. Aqui o melhor é ter um oscultador de eventos que escuta um click em elementos com uma dada classe. Aí vai ter de alterar o HTML um pouco.

Por exemplo:

HTML

<div class="video" data-youtubeid="UJAwNkhbYWM">Video 1</div>
<div class="video" data-youtubeid="gIdqiis3Mts">Video 1</div>
<div class="video" data-youtubeid="Q78COTwT7nE">Video 1</div>
<div class="video" data-youtubeid="Z88qapIgOLg">Video 1</div>
<div class="video" data-youtubeid="oUX2RSyLw3w">Video 1</div>
<iframe width="854" height="510" ID="caixa" frameborder="0" allowfullscreen></iframe>

JavaScript / jQuery

$('.video').on('click', function () {
    var video = $(this).data('youtubeid');
    $('#caixa').attr('src', "https://www.youtube.com/embed/" + video);
});

Demo: http://jsfiddle.net/togzdkgu/

0

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 .