如何从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>

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

Answer 1

请记住，您将受到跨域安全性和其他帧间限制的约束，如果您托管来自同一域的两个帧，这应该不是问题，但否则会非常有效地阻止这一点。

从子框架中获取元素并将其附加到父框架可能无法正常工作，并且肯定过于复杂。 我建议在父对象上创建一个新的脚本元素，然后简单地复制内容。 就像是：

(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处理程序，并从子级中触发一条消息（消息传递比帧间调用更为复杂，但通常更易于维护）。。

如何从iframe内部将脚本元素复制到父级？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-01-26 17:59:34

如何从iframe内部将脚本元素复制到父级？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-01-26 17:59:34

解决方案1
1 已采纳 2015-01-26 17:59:34