How to integrate a <script></script> into the content method of fancybox2

Question

I'm trying to load a javascript content inside the content method of fancybox.

<script>
$('#streaminput').on("click", function() {
  $('#streaminput').fancybox({ 
      width    : '95%', 
      height   : '95%', 
      autoSize    : false, 
      closeClick  : false, 
      fitToView   : false, 
      openEffect  : 'elastic', 
      closeEffect : 'none',
      content: '<script src="http://scriptfromanotherwebsite" idvideo="myid"></script>'

  });
});
</script>

I tried to send the idvideo in ajax and load the script in another page (with the iframe fancybox) without luck...

Thanks in advance

Thank the popup is displaying now but look like the script doesn't load inside the popup. — Anyone_ph

Runcorn Runcorn · Accepted Answer · 2014-08-04T07:10:09

I am not used to Fancybox usage but hey you have jQuery to do the job for you.

So, How about using jQuery.getScript() method.

Description: Load a JavaScript file from the server using a GET HTTP request, then execute it.

In your fancybox beforeShow or beforeLoad callbacks ,

beforeLoad: function(current, previous) {
          $.getScript("https://github.com/aterrien/jQuery-Knob/blob/master/js/jquery.knob.js", function(){
               alert("Script Loaded");
           });
      }

I think this would do the trick for you.

After going through a few google search, i came up with a solution. In your fancybox beforeShow or beforeLoad callbacks add this line to add a script to the header section,

 var add_script = document.createElement('script');
 add_script.setAttribute('src','https://github.com/aterrien/jQuery-Knob/blob/master/js/jquery.knob.js');
 add_script.setAttribute('idvideo','mynameispawal');
 document.head.appendChild(add_script);

And i believe you can call AJAX inside beforeshow to access the value of idvideo.

And here is a demo fiddle.

How to integrate a <script></script> into the content method of fancybox2

1 Answers