Question

从 iframe 调用父窗口函数

2010-01-29

518967

javascript iframe onclick

我想从 iframe 调用父窗口 JavaScript 函数。

<script>
    function abc()
    {
        alert("sss");
    }
</script>

<iframe id="myFrame">
    <a onclick="abc();" href="#">Call Me</a>
</iframe>

Answer 1

<a onclick="parent.abc();" href="#" >Call Me </a>

请参阅 window.parent

返回对当前窗口或子框架的父级的引用。

如果窗口没有父级，则其 parent 属性是对自身的引用。

当窗口在 <iframe> 、 <object> 或 <frame> 中加载时，其父级是包含嵌入窗口的元素的窗口。

Answer 2

Window.postMessage()

此方法可安全地启用 跨源 通信。

如果您有权访问父页面代码，则可以调用任何父方法，也可以直接从 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);
}

Iframe 代码：

window.parent.postMessage({
    'func': 'parentFunc',
    'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *

更新：

安全说明：

如果您知道其他窗口的文档应位于何处，请始终提供特定的 targetOrigin，而不是 * 。未能提供特定目标会泄露您发送给任何感兴趣的恶意网站的数据（ ZalemCitizen 的评论）。

参考资料：

Answer 3

我最近也不得不找出为什么这个方法不起作用。

您想要从子 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>

希望这可以帮助任何再次遇到此问题的人。