作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 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/
我是一名优秀的程序员,十分优秀!