PDA

View Full Version : How to reload the parent frame



Rain Lover
01-01-2014, 01:34 PM
Sample parent 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/0B5jOXzxlxbMhYVF3b0lubjlDWm8/parent.html


Sample child 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
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/04/16/getting-the-url-of-an-iframes-parent/

coothead
01-01-2014, 05:23 PM
Hi there Rain Lover,

try it like this...


<!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
Hi there Rain Lover,

try it like this...


<!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/0B5jOXzxlxbMhYVF3b0lubjlDWm8/parent2.html

jscheuer1
01-01-2014, 05:56 PM
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
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:


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:


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:


<!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:


<!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.

molendijk
01-01-2014, 08:22 PM
THIS (http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/) may be useful.

Rain Lover
01-02-2014, 07:24 AM
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:


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

You're such a brian! Here's a real Google gadget URL embedded in my site:
https://slr19h92al8so047kuchhg5aog1sb42l-a-sites-opensocial.googleusercontent.com/gadgets/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/116132513635841516857/sample.xml&container=enterprise&view=default&lang=en&country=ALL&sanitize=0&v=76f207f7b5e2e759&libs=core&mid=22&parent=https://sites.google.com/site/michaelmccolin/test#st=e%3DAIHE3cAfC01n7jnwcwtsdiW6arUUaayRCBKc06x5n6pwmrGvzLt9TTHjjg5KVrrmrqWLAEPuJ0OsN1cJEGT951a%252BseXhJ%252FfgRaDNXSkucTweso68vrvZqSeRus8JMg%252BJU92KPV58 O4rf%26c%3Denterprise&rpctoken=349938721931878410

And here's the site URL: https://sites.google.com/site/michaelmccolin/test

According to your instructions I can get it like this:
var topURL = unescape(location.search.split('parent=')[1]);
(Please correct me if it's not corrcet. Q: Why did you use unescape while it seems to be working without it, too?)

However, after a long search I just came up with a different approach:
window.parent.location = document.referrer;

Child:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Child</title>
</head>
<body>
<button onclick="myFunction();">Try it!</button>
<script>
function myFunction() {
window.parent.location = document.referrer;
}
</script>
</body>
</html>

I wonder what you think. Is it a reliable solution?

Beverleyh
01-02-2014, 09:42 AM
However, after a long search I just came up with a different approach:
window.parent.location = document.referrer;

Hmm, well document.referer is what I already highlighted in my earlier reply to you
http://www.dynamicdrive.com/forums/showthread.php?76179-How-to-reload-the-parent-frame&p=304357#post304357
But take note of the comments where it can fail - reportedly in Firefox and IE8 and in the case of further navigation within the framed page. I haven't tested personally though.

Rain Lover
01-02-2014, 10:15 AM
Hmm, well document.referer is what I already highlighted in my earlier reply to you
http://www.dynamicdrive.com/forums/showthread.php?76179-How-to-reload-the-parent-frame&p=304357#post304357
But take note of the comments where it can fail - reportedly in Firefox and IE8 and in the case of further navigation within the framed page. I haven't tested personally though.

Thanks for the link! I saw document.referrer in your reference and some other articles, but I didn't know how to apply it in my code.

jscheuer1
01-02-2014, 02:00 PM
Unless it's unimportant, I would not use the referrer. It will sometimes fail.

If you do decide to use the method I suggested, since it appears that there are already many things being sent on the search string of the src attribute of the iframe, further refinement should be used in decoding it:


function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}

Example usage:


var topURL = getQval('parent');

To answer the question about unescaping it, that was to decode any elements of it that were encoded if it were more complex (like possibly including its own search string) or simply if it was encoded for slashes which it technically should be, and would be if the search string were generated by javascript and encoded correctly on the top page. In a case like this, unencoding (unescaping) a string that wasn't encoded will not change it. And in some cases it's a good idea. The browser might have encoded it before sending it.