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

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

从子框架中获取元素并将其附加到父框架可能不起作用，并且肯定过于复杂。我建议在父级上创建一个新的脚本元素，然后简单地复制内容。类似的东西：

(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 个答案: