如何在fancybox2的content方法中集成一个<script></script>答案

【问题标题】：How to integrate a <script></script> into the content method of fancybox2如何在fancybox2的content方法中集成一个<script></script>
【发布时间】：2014-08-04 06:24:17
【问题描述】：

我正在尝试在 fancybox 的 content 方法中加载一个 javascript 内容。

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

我尝试在 ajax 中发送 idvideo 并将脚本加载到另一个页面（使用 iframe 幻想框）但没有运气......

提前致谢

【问题讨论】：

你必须转义结束标签<\/script>
感谢弹出窗口现在正在显示，但看起来脚本没有加载到弹出窗口中。

标签： javascript jquery ajax fancybox-2

【解决方案1】：

我不习惯 Fancybox 的使用，但是您有 jQuery 可以为您完成这项工作。

那么，使用jQuery.getScript() 方法怎么样。

描述：使用 GET HTTP 从服务器加载 JavaScript 文件请求，然后执行。

在您的幻想框中 beforeShow 或 beforeLoad 回调，

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

我认为这对你有用。

经过一些谷歌搜索后，我想出了一个解决方案。在您的幻想框beforeShow 或beforeLoad 回调中添加此行以将脚本添加到标题部分，

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

而且我相信你可以在beforeshow 中调用AJAX 来访问idvideo 的值。

这是demo fiddle。

【讨论】：

是的，就是这样！谢谢拯救我的一天。