从 iframe 调用父窗口函数

javascript onclick iframe

2022-08-29 23:58:50

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

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

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

答案 1

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

请参阅窗口。父

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

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

当一个窗口被加载到、或中时，它的父级是嵌入该窗口的元素的窗口。<iframe><object><frame>

答案 2

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 *

更新：

安全说明：

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

引用：