在单击事件上从父窗口调用子窗口的功能在 safari 和 chrome 上不起作用答案

【问题标题】：calling the function of child window from parent window on click event not working on safari and chrome在单击事件上从父窗口调用子窗口的功能在 safari 和 chrome 上不起作用
【发布时间】：2012-04-25 13:40:43
【问题描述】：

我正在尝试在单击事件时从父窗口调用子窗口的函数。它不适用于 Safari 和 Chrome，但适用于 Firefox。我使用此代码从父窗口按钮事件调用子窗口的功能

var iframeElem = document.getElementById("iframe");
iframeElem.contentWindow.muteVideoSound();

静音窗口是在 iframe 中加载的子窗口上的功能。

【问题讨论】：

标签： javascript javascript-events

【解决方案1】：

您是否尝试从父窗口调用 iframe 内的函数？

可以这样做：

main_window.html

<!DOCTYPE html>
<html>
<head>
<title>main window</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
    $("a#update_text_link").click(function(event) {
        event.preventDefault();
        $("iframe#iframe_id")[0].contentWindow.update_text(); // run the function
    });
});
</script>
</head>
<body>
<p><a href="#" id="update_text_link">Update iframe text</a></p>
<iframe src="iframe.html" id="iframe_id"></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
function update_text() {
    $("h1").fadeOut(function () {
        $(this).text("Some updated text.").fadeIn();
    });
}
</script>
</head>
<body>
<h1>Some text.</h1>
</body>
</html>

但是，如果您从本地文件系统加载网页，这在某些浏览器（如 Chrome）中将不起作用。所以你需要把这个例子放到web服务器上，然后尝试在这样的浏览器中打开。

此外，如果您需要有关此主题的更多信息（包括对旧版浏览器的支持），您可以在此处阅读类似问题的一些答案：

Invoking JavaScript code in an iframe from the parent page

【讨论】：