如何从 iframe 中将脚本元素复制到父元素？

Question

我有一个 iframe，它需要将脚本复制到父级并在父级中执行一个函数：

<!doctype html>
<html lang="en">
<head>
</head>

<body>
  <script id="myscript">
  function foo() { alert('foo'); }
  </script>

  <script>
  (function () {
    var script = document.getElementById('myscript');
    parent.document.head.appendChild(script);

    // call function in parent 
    parent.foo();
  })();
  </script>
</body>
</html>

我得到 undefined 不是一个函数。为什么该函数未在父级中定义？

Answer 1

请记住，您将受到 cross-origin 安全和其他 inter-frame 限制，如果您从同一域托管两个框架，这应该不是问题，但会阻止此否则非常有效。

从 child 框架获取元素并将其附加到 parent 可能行不通，而且绝对过于复杂。我建议在 parent 上创建一个新的脚本元素并简单地复制内容。类似于：

(function () {
    var pdoc = parent.document;
    var dest = pdoc.head;
    var text = document.getElementById("myscript").textContent;

    var pscr = pdoc.createElement("script");
    pscr.textContent = text;
    dest.appendChild(pscr);

    parent.foo();
})();

这很难成为一个很好的例子，因为 JSFiddle 和类似的服务提供来自不同来源的框架，所以我没有彻底测试它。以这种方式获取脚本内容绝对可行，创建元素当然应该。我在测试时最接近的是重命名函数并使用当前帧：

(function() {
  var pdoc = self.document;
  var dest = pdoc.head;
  var text = document.getElementById("myscript").textContent.replace("foo", "bar");

  var pscr = pdoc.createElement("script");
  pscr.textContent = text;
  dest.appendChild(pscr);

  self.bar();
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果您希望这是一个更便携的解决方案，您还可以考虑在脚本中使用 onMessage 处理程序并从 child 触发消息（message-passing 是比 inter-frame 调用更复杂，但通常更易于维护。

如何从 iframe 中将脚本元素复制到父元素？

How to copy a script element to the parent from inside an iframe?

javascript

iframe