Onclick Load page then change iframe source on loaded page

Question

I'm building a site and would like to be able to click a link in the navigation bar then when you click this link it'll href to the main index page and at the same time change the source of an iframe on that index page. I hope that's a clear enough idea of what I'm trying to do? The reason for this is because, as below, the community page will have a completely different page to it, however the rest of the site will be hosted directly from the index page but load into the main iframe on that page. Here's the navigation (which I tried but does not work) which might make what I'm trying to do that much clearer:

div class="navbar"><!--start nav-->
<div class="nbutton"><a onclick="location.href='index.html'" href="home.html" target="mainframe">Home</a></div>
    <div class="nbutton"><a onclick="location.href='forum.html'" href="forum/" target="forumframe">Community</a></div>
<div class="nbutton"><a onclick="location.href='index.html'" href="events.html" target="mainframe">Events</a></div>
<div class="nbutton"><a onclick="location.href='index.html'" href="sponsors.html" target="mainframe">Sponsors</a></div>
<div class="nbutton"><a onclick="location.href='index.html'" href="gallery.html" target="mainframe">Gallery</a></div>
<div class="nbutton"><a onclick="location.href='index.html'" href="streams.html" target="mainframe">Streams</a></div>

Iframe on index.html page code:

<iframe name="mainframe" width="700" height="600" src="images/randoms/iframetest.jpg" frameborder="1" allowFullScreen="" style="background:transparent;text-align:center;"></iframe>

Iframe on forum.html page code:

<iframe name="forumframe" width="960" height="1200" src="forum/" frameborder="0" allowFullScreen=""></iframe>

I'm hoping this will make it easier to see what I'm trying to do with it?

When I click on any link other than the forum link the iframe won't load but then again, the iframe on the forum.html is set to load the "forum/" location anyway so it doesn't really need to onclick event it's just there for uniformity I guess.

So summary example of what I'm looking to do:

Click on "Home" would load index.html then change the iframe source on index.html to "home.html" Click on "Events" would load index.html then change the iframe source on index.html to "events.html"

I hope that makes sense?

Any help is greatly appreciated! Any further details please ask and I'll try to clarify anything I've missed or that isn't clear.

score 0 · Accepted Answer · edited May 23 '17 at 12:22

You can pass index.html?subpage=home.html as the URL of the primary page and use JavaScript to read the subpage parameter to set the frame's page.

You can use the code below to read URL parameters. Lifted from this answer:

var QueryString = function () {
  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
      // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
      // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
      // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
    return query_string;
} ();

You can then access QueryString.c

Don't forget that if this answers your question, you should click the checkmark to the left of the question (making it green) to mark this as the accepted answer. Thanks. — Devin Burke, Dec 31 '12 at 14:28

Onclick Load page then change iframe source on loaded page

1 Answers1