Question

我正在尝试在iframe中插入jQuery和另一个JS文件。我想知道这是否可能，或者是否存在一些问题？

我们说这些网页只是在同一个域名上运行。

父页面将尝试使用Javascript覆盖iframe中的元素然后我需要在子页面上添加另一个jQuery库（http://jsbin.com/esifez/2）。

对此有何想法？

$(function() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://code.jquery.com/jquery-latest.min.js';
  $("#main_iframe").contents().find("body").append(script);
});

Demo link

谢谢

Answer 1

在您的演示链接中，您的iframe已经包含在$计算之前尝试访问jQuery或find("body").append(script);方式的JavaScript。因此，这将触发错误，因为$尚不存在。你要么做两件事之一：

手动在iframe的源头中包含jQuery脚本标记。考虑到你的iframe源代码中有jQuery代码，为什么不这样做呢？
没有任何脚本尝试访问iframe源代码中的jQuery或$，除非引用位于函数内或单独的脚本中，只有在插入后才会执行你的jQuery脚本标签。

基本上对于第2点，请不要直接在iframe中使用：

<script>
  /// dolar wont exist yet
  $(function(){

  })
</script>

而是在您的父代码中执行此操作：

var insertScript = function(src){
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  $("#main_iframe").contents().find("body").append(script);
}

$(function() {
  insertScript('http://code.jquery.com/jquery-latest.min.js');
  // any code in your iframe that relies on jQuery should be 
  // moved off into this file
  insertScript('iframe-js-code-that-requires-jq.js');
});

然而，将jQuery脚本标记放在iframe源代码中仍然更有意义，而不是动态插入它。

如何将外部js文件注入iFrame

1 个答案: