如何将外部js文件注入iFrame

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

演示链接 。

谢谢

Answer 1

在您的演示链接中，您的iframe已经包含javascript，试图在您的find("body").append(script);之前访问$或jQuery方式find("body").append(script); 将永远得到计算。 所以这会引发错误，因为$还不存在。 你要么做两件事之一：

1. 手动在iframe源代码的头部包含jQuery脚本标记。 考虑到你的iframe源代码中有jQuery代码，为什么不这样做呢？

2. 没有任何脚本试图访问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源代码中仍然更有意义，而不是动态插入它。