Sample parent code:

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parent</title>
</head>
<body>
<iframe src="https://dl.dropboxusercontent.com/u/4017788/Labs/child.html" width="200" height="100"></iframe>
</body>
</html>
See it in action:
https://googledrive.com/host/0B5jOXz...m8/parent.html


Sample child code:

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Child</title>
</head>
<body>
<button onclick="myFunction();">Try it!</button>
<script>
function myFunction() {
parent.location.reload();
}
</script>
</body>
</html>
I have tried many methods offered in similar questions to no avail, such as:

window.parent.location.reload();
top.location.reload();
etc.

What am I missing and what's the right approach?