I'm trying to call the function of child window from parent window on click event. Its not working on Safari and Chrome, but it is working on Firefox. I use this code to call the function of child window from parent window button event
var iframeElem = document.getElementById("iframe");
iframeElem.contentWindow.muteVideoSound();
The mute window is a function on child window which loads in iframe.
Are you trying to call a function inside an iframe from the parent window?
It can be done like this:
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>
However, this will not work in some browsers (like Chrome) if you load the web page from the local filesystem. So you need to put this example on a web server, and then try to open it in such browsers.
Also, if you need more information on this topic (including support for older browsers), you can read some answers to a similar question here:
