A link in parent that refreshes a page in an iframe

My site has a menu + iframe layout.
Clicking on the menu link loads a page in the iframe.
The iframe is set to a specified dimension.

I only have a single page that loads in the iframe.
Clicking on the menu link loads a specific section on the page using the name anchor.
The specified dimension of the iframe allows for the selected info to be visible.

I can create a new page for every link, but to the site’s nature (its like a catalogue), I rather have it on a single page and have it called by the name anchor.
I am trying to set it so that every time a menu link is clicked, the single page refreshes itself, and then goes to the anchored location.
I need this for a reason.

I have tried many things but I have not got it working.

Here is my iframe:

<iframe name="data" id="data"></iframe>

Some of the codes I tried messing around with:

<a href="info.html#red" target="data" onclick="window.location.reload()">Red</a>
<a href="info.html#red" target="data" onclick="window.location.reload(this.href,this.target);">Red</a>
<a href="info.html#red" target="data" onclick="javascript:onclick=refreshscreen(requestno);">Red</a>

Thank you!

There may be simpler ways of doing this, but this was the only bombproof method I could devise:

<a href="info.html#red" target="data" onclick="return iframeReloadToAnchor( 'data', this.href )">Red</a>

<script type='text/javascript'>

function iframeReloadToAnchor( iframeId, href ) /* May not work LOCALLY under Chrome */
 var ifr = document.getElementById( iframeId ); 

 ifr.setAttribute("onload", "this.contentWindow.location.href = '"+href+"';" ); 
  /* I.E. needs this because scripts can't assign the event to an iframe directly!  */
 ifr.onload = function(){ var that = this; setTimeout( function(){ that.contentWindow.location.href = href; }, 50); };
  /* Safari needs the timeout or it jumps back to the previous offset. */
 ifr.contentWindow.location.reload( true );

 return false;


Gave it a go but didn’t seem to work. Thanks a lot though!

Hmm I’ve looked everywhere but I cannot find a solution. Perhaps I have to create individual pages.


Thank you for the demo!

I see why it didn’t work. It was due to my poor explanation.
I do not have a source for the iframe itself.
This is because I have other pages that uses the iframe.

Using your example, it would be like having:




… etc etc

Therefore, I cannot specify a source to the iframe. It loads the anchor.
But I would like to have each page refresh itself when the anchor is clicked.
For example,
if iframesource1.htm#red is clicked, I would like iframesource1.htm to refresh, and then move to #red.
if iframesource1.htm#green is clicked, then iframesource1.htm would refresh itself again, and then move to #green.

Thank you very much though! Its better than what I had tried.