How to reload the parent frame

**Rain Lover** · 01-01-2014, 01:34 PM

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?

**Beverleyh** · 01-01-2014, 03:57 PM

If I'm reading it right, you want a button in the framed (child) page to refresh the main framing (parent) page?

You should be able to do that with a hyperlink to the parent page that has a target of parent;

In child.html - <a href="parent.html" target="parent">Reload</a>

**Rain Lover** · 01-01-2014, 04:02 PM

Originally Posted by Beverleyh

If I'm reading it right, you want a button in the framed (child) page to refresh the main framing (parent) page?

You should be able to do that with a hyperlink to the parent page that has a target of parent;

In child.html - <a href="parent.html" target="parent">Reload</a>

The problem is the parent frame URL is not fixed -- it's dynamic.

**Beverleyh** · 01-01-2014, 04:46 PM

In what way? Can you give examples?

(This is the type of information you should provide in your opening post)

Also, are the pages on different domains? Probably why the JavaScript isn't working due to same origin policy.

Here's something that might offer further guidance: http://www.nczonline.net/blog/2013/0...frames-parent/

**coothead** · 01-01-2014, 05:23 PM

Hi there Rain Lover,

try it like this...

Code:


<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<title>Child</title>

</head>
<body>

<button id="mybutton">Try it!</button>

<script>
(function() {
   'use strict';

document.getElementById('mybutton').onclick=function() {
   parent.location.reload(true);
 }
})();
</script>

</body>
</html>

...but note that Chrome 31.0 and Opera 18.0 will not render this locally.

The files must be uploaded to your server.

coothead

**Rain Lover** · 01-01-2014, 05:51 PM

Originally Posted by coothead

Hi there Rain Lover,

try it like this...

Code:


<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<title>Child</title>

</head>
<body>

<button id="mybutton">Try it!</button>

<script>
(function() {
   'use strict';

document.getElementById('mybutton').onclick=function() {
   parent.location.reload(true);
 }
})();
</script>

</body>
</html>

...but note that Chrome 31.0 and Opera 18.0 will not render this locally.

The files must be uploaded to your server.

Test it here...

http://www.coothead.co.uk/parent.html

coothead

Many thanks for the answer, but it doesn't seem to work:
https://googledrive.com/host/0B5jOXz...8/parent2.html

**jscheuer1** · 01-01-2014, 05:56 PM

Originally Posted by coothead

The files must be uploaded to your server.

And that's probably the problem*. As Beverley already noted, unless both the parent and child pages are on the same domain, security features of browsers will not allow a javascript solution.

So, if the pages are not both on the same domain, and the 'top' page's URL is dynamic, we would need to know in what way (again as Beverley already noted). However, that might not be enough, but if it's possible would probably hold the key

*The original code in the first post in this thread should/would work if the pages were both on the same domain.

**Rain Lover** · 01-01-2014, 06:07 PM

Originally Posted by jscheuer1

So, if the pages are not both on the same domain, and the 'top' page's URL is dynamic, we would need to know in what way (again as Beverley already noted). However, that might not be enough, but if it's possible would probably hold the key

Dear John,

Actually I'm working on a Google gadget that should be used on different pages and by different users. Then the parent frame URL depends on the gadget user's website. In short, I cannot count on a fixed parent URL in my coding.

unless both the parent and child pages are on the same domain, security features of browsers will not allow a javascript solution.

Then I need to put my question this way: How to reload the parent frame that's located on a different frame? In other words, how can I reload the whole page via the iframe that's on a different domain?

**jscheuer1** · 01-01-2014, 06:34 PM

The way Beverley mentioned in her first post, which brings us back to the question - in just exactly what way is the top URL dynamic? If it is known to the person who is using the widget on their site for instance, it could be passed by them to the widget.

Like say the top page is mydomain.com/somepage.htm. And the child page, the widget, is googlesomething.com/widget. The url used as the src attribute of the iframe could be:

googlesomething.com/widget?top=mydomain.com/somepage.htm

The widget could then use either javascript or server side code to get the mydomain.com/somepage.htm part out of it's location object/URL and use it to load that URL (thus refreshing the top page). In javascript, on the page in the iframe, this information (for a src attribute following the above template) would be:

Code:

location.search.split('=')[1]

This requires either that the person installing the widget on his or her site can add this information manually or that a script they can use to write the iframe tag would include it.

So you could have on the page in the iframe:

Code:

var topURL = location.search.split('=')[1];
document.write('<a target="_top" href="http://www.' + topURL + '">Refresh</a>');

That (assuming I've explained this clearly enough and without undue typos) would make a link that, when clicked would reload the top page from the iframe.

Does that sound workable?

**jscheuer1** · 01-01-2014, 07:39 PM

I tried this out and it would probably be simplest to pass the entire URL via javascript. Like this would be the top page:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
document.write('<iframe src="child.htm?top=' + encodeURIComponent(location.href) + '" width="300" height="300" scrolling="auto" frameborder="1"></iframe>');
</script>
</body>
</html>

Change child.htm to the full path to the widget. Then on the widget page (the page in the iframe) have:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<script type="text/javascript">
var topURL = unescape(location.search.split('=')[1]);
document.write('<a target="_top" href="' + topURL + '">Refresh</a>');
</script>
</body>
</html>

That should take care of it. This could also be done using the DOM to create these elements rather than document.write, and that would probably be better.