将 javascript 函数注入到 Iframe 中

这个链接 (存档版本）描述了如何将脚本中的代码注入到 iframe 中：

function injectJS() {
  var iFrameHead = window.frames["myiframe"].document.getElementsByTagName("head")[0];
  var myscript = document.createElement('script');
  myscript.type = 'text/javascript';
  myscript.src = 'myscript.js'; // replace this with your SCRIPT
  iFrameHead.appendChild(myscript);
}

没关系，但是如果我想将函数对象插入 iframe 中怎么办？并在 iframe 上下文中执行它？假设我有：

function foo () {
    console.log ("Look at me, executed inside an iframe!", window);
}

我想在 iframe 中插入 foo 的代码？ （函数 foo 可能是动态加载的东西，我不能只用引号将其括起来)

我天真地尝试过：

var scriptFooString = "<script>" + foo.toString() + "</script>"

获取函数内部的代码，但是

• 我不知道如何将它插入到 iframe HEAD 中（也许使用 jquery？）
• 我不知道这是否是正确的方法
• 我不知道如果函数比这更复杂时会发生什么
• 我不知道双引号和单引号会发生什么scriptFooString

有什么提示吗？

首先，只有当您的框架和显示它的页面位于同一域内时，您才能完成此操作（由于跨域规则）

其次可以直接通过JS操作frame的dom和window对象：

frames[0].window.foo = function(){
   console.log ("Look at me, executed inside an iframe!", window);
}

要从 DOMElement 对象获取框架，您可以使用：

var myFrame = document.getElementById('myFrame');

myFrame.contentWindow.foo = function(){
       console.log ("Look at me, executed inside an iframe!");
}

请注意，foo 中的范围没有更改，因此 window 仍然是 foo 内的父窗口等。

如果您想注入一些需要在另一个框架的上下文中运行的代码，您可以注入一个脚本标签，或对其进行评估：

frames[0].window.eval('function foo(){ console.log("Im in a frame",window); }');

尽管普遍的共识是永远不要使用 eval，但我认为如果您确实需要完成此任务，它是比 DOM 注入更好的选择。

因此，根据您的具体情况，您可以执行以下操作：

frames[0].window.eval(foo.toString());