如何向iFrame注入外部js文件

Question

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

假设这些页面只是在同一个域名下运行。

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

对此有什么想法吗？

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

演示链接。

谢谢。

- Pennf0lio

---

你是否了解同源策略？在你的最终解决方案中，父页面和子页面是否将从同一域名下提供服务？ - Lukas Winzenried

是的，如上所述 :) 它将在相同的源上运行。 - Pennf0lio

Answer 1

在您的演示链接中，您的iframe已经包含了尝试访问$或jQuery的javascript，早于您的find("body").append(script);被计算。因此，这将触发错误，因为$还不存在。您需要执行以下两个操作之一：

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

2. 除非引用位于函数或单独的脚本内，并且只有在插入jQuery脚本标签后才会执行，否则不要在iframe源代码中尝试访问jQuery或$。

基本上对于第二点，不要直接在您的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源代码中仍然更有意义，而不是动态插入它。

- Pebbl

---

很不幸，我没有写入该文件的权限，所以我只能使用iframe进行覆盖。但是，我要覆盖的文件和包含它的页面只有相同的域名。 - Pennf0lio

我尝试了第二种方法，因为它更适合我的需求。但出于某种原因，它在父页面而不是嵌套在iframe内的子页面上加载脚本。演示在这里：（http://jsbin.com/ilabad/3/），有什么想法吗？谢谢！ - Pennf0lio

@Pennf0lio，这只是一个猜测，但你可能需要使用iframe的文档对象来创建脚本元素，而不是父级的对象。然而...（续在下一条评论中）。 - Pebbl

@Pennf0lio 如果你不能从iframe文件中删除jQuery引用，那么你的js代码在执行页面时就无法进展。内联脚本标签将在读取时立即执行，而在iframe呈现其HTML之前没有简单/安全的方法来介入。如果你没有编辑该文件的权限，你可以通过使用一些后端代码（如php或python）驱动的代理脚本来读取iframe文件。这个后端脚本将读取你的iframe源码，并添加或删除你需要的元素，比如一个jQuery脚本标签。 - Pebbl