我想从 iframe 调用父窗口 JavaScript 函数。
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
从 iframe 调用父窗口函数
IT技术
javascript
iframe
onclick
2021-01-30 14:15:12
6个回答
<a onclick="parent.abc();" href="#" >Call Me </a>
返回对当前窗口或子帧的父级的引用。
如果窗口没有父窗口，则其父属性是对自身的引用。
当窗口在、 或 中加载时<iframe>，其父窗口是元素嵌入窗口的窗口。<object><frame>
Window.postMessage()
这种方法可以安全地启用cross-origin通信。
如果您有权访问父页面代码，则可以调用任何父方法以及可以直接从Iframe. 这是一个小例子：
父页面：
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
// Check sender origin to be trusted
if (event.origin !== "http://example.com") return;
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
// Function to be called from iframe
function parentFunc(message) {
alert(message);
}
框架代码：
window.parent.postMessage({
'func': 'parentFunc',
'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *
更新：
安全提示：
*如果您知道其他窗口的文档应位于何处，请始终提供特定的 targetOrigin，NOT 。未能提供特定目标会泄露您发送到任何感兴趣的恶意站点的数据（来自ZalemCitizen 的评论）。
参考：
我最近不得不找出为什么这也不起作用。
您要从子 iframe 调用的 javascript 需要位于父 iframe 的头部。如果在正文中，则脚本在全局范围内不可用。
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="parent.abc();" href="#">Click Me</a>
</iframe>
</body>
希望这可以帮助任何再次偶然发现此问题的人。
我已将此作为单独的答案发布，因为它与我现有的答案无关。
这个问题最近再次出现，因为从引用子域的 iframe 访问父级，并且现有的修复程序不起作用。
这次的答案是将父页面的document.domain和iframe修改为相同。这将使同源策略检查误认为它们在完全相同的域中共存（子域被视为不同的主机并且未通过同源策略检查）。
将以下内容插入<head>iframe 中的页面以匹配父域（根据您的文档类型进行调整）。
<script>
document.domain = "mydomain.com";
</script>
请注意，这会在 localhost 开发中引发错误，因此请使用如下检查来避免该错误：
if (!window.location.href.match(/localhost/gi)) {
document.domain = "mydomain.com";
}
您可以使用
window.top
请参阅以下内容。
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="window.top.abc();" href="#">Click Me</a>
</iframe>
</body>