Changing the content of iframe

I have an index.html page with an iframe in the body like this:

<iframe id=content name=content src="#content"></iframe>

The src (position, size etc) is defined in the head of the index.html by:

#content {
position: relative;
top: 0;
left: 0;
border: 0;
height: 800px;
width: 80%;  
}

and content is loaded into the iframe by targeting the iframe by calling separate pages - lets call them Page 1 and Page 2 - from a menu in the body of index.html like this

<ul>
<li> <a href="index.html"><img src="imgs/home.gif"></a> </li>
<li> <a href="page1.html" target="content">Page 1</a> </li>
<li> <a href="page2.html" target="content">Page 2</a> </li>
</ul>

The first link is used to reload the whole site and shows not a tekst, but a neat home.gif image from the imgs submenu.

Kind of in days of old having a menu or top frame loading different pages in a content frame.

This works fine, but as content is first put in the iframe by clicking one of the other menu links there is no content in the iframe when the index.html page it self is loaded. I would like a page - lets call it default.html loaded into the iframe when the index.html page is loaded or is reloaded from the first menu link, and I have searched for hours without being able to find an answer to how.

just add onclick even to the HREF links; Page1 and Page2

onClick:

$(document).ready(function(){
 $("#hPage1").click(function(){
  document.getElementById("iframename").src="page1.html";  
 });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<p><a id="hPage1" href="#" >page1</a></p>
<iframe id="iframename" src="/"></iframe>

see working example: http://jsfiddle.net/vinokurov/gat5y20z/