Insert result from script or script code into a div

Asked

Viewed 386 times

0

How do I load one script on a page, the result appears on a div?

Example:

<script type="text/javascript">

/*
   conteúdo do script
*/

</script>

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

The goal is that the script when it is loaded into the page, its output appears where the div is located.

I have an example here:

<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>

With this code it is possible to do this with a Youtube video, however I would like to run the same with a script. Trying to clarify a little more....

Let’s look at the example of Lightbox that is used to view images. That part of script:

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

Indicates that by clicking the script, and he finding images with the end, .jpg, .png and others it will make the desired effect.

In the case of a script I wanted him to be executed he do it in a div specifies.

Like he finds the image .png, but he’ll show her at Sidebar for example, why the script found the div there.

javascript jquery

  • You want to enter the result of a script or the code of a script that has been executed?

  • The result, the script executes a function, and the result appears in the div

  • 1

    This is very relative, if such a script is simply printing right where it is, just put it into the div normally, but if it is modifying the content of a previously defined element, you can name the div with the same name, or identify the element the script used or created and move content to div using jquery.

  • How did you get this to work?

1 answer

3

The answer to your problem and the answer to your question are, in my view, slightly different.

To load a script to the page needs a string with the content of the script, then you have to create a script element that will be added to the page and then it runs directly.

Example:

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

To change the video inside the iframe does not need to have a new script to be added to the page. Here it is best to have an event receiver that listens to a click elements with a given class. There you have to change the HTML a little bit.

For example:

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/

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.