Hi there,
Paul is correct that your first attempt causes an error as it tries to access an iframe on a different domain.
You can see this if you look in the error console when you click the try it button.
Uncaught SecurityError: Blocked a frame with origin "https://dl.dropboxusercontent.com" from accessing a frame with origin "https://googledrive.com". Protocols, domains, and ports must match.
In addition to the fine solutions you have received thus far, here’s what I would do:
If you own both domains:
I would use HTML5’s Window.postMessage API which allows you to send messages from parent to iframe and the other way round.
Here’s the docs: https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
This is basically what Paul is doing, but you don’t really need to use jQuery for this.
If you don’t own one of the domains:
Forget it.
If one of the domains uses https:
As Francky correctly says, it is bad practice to embed an iframe with content served over HTTPS within a page served over plain HTTP (or mix content).
However, I am no security expert, so I would ask for further advice in the Web Security forum.
If you have control of both domains, this should work for you.
I got the main inspiration here: http://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent
Parent: a.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<h1>I'm the parent </h1>
<p id="progressIndicator">Waiting </p>
<iframe src="path/to/iframe/here" id="iframe"></iframe>
<script>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
if(e.origin == "http://www.iframe-domain.com"){
alert("Received following message: " + e.data);
location.reload();
} else {
alert("error");
}
},false);
var progressIndicator = document.getElementById("progressIndicator");
window.setInterval(function(){
progressIndicator.innerHTML += ".";
}, 1000);
</script>
</body>
</html>
Child: b.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
</head>
<body>
<h2>I'm the child</h2>
<form name="form">
<input type="submit" value="Reload parent"/>
</form>
<script>
document.forms.form.onsubmit = function() {
parent.postMessage("reloadWindow","*");
return false;
}
</script>
</body>
</html>
As you can see, I added a progress indicator just to prove that the page gets reloaded.
HTH
