gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:38:54 25 4
gpt4 key购买 nike

我有一个 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 不是一个函数。为什么该函数没有在父级中定义?

最佳答案

请记住,您将受到跨源安全性和其他框架间限制的约束,如果您托管来自同一域的两个框架,这不应该成为问题,但否则会非常有效地阻止这种情况。

从子框架获取元素并将其附加到父框架可能行不通,而且绝对过于复杂。我建议在父级上创建一个新的脚本元素并简单地复制内容。像这样的东西:

(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 处理程序并从子进程中触发消息(消息传递稍微复杂一些,但是通常比帧间调用更易于维护)。

关于javascript - 如何从 iframe 内部将脚本元素复制到父级?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28155751/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com