title: How to change frame source without reloading the page
body: <p>I am creating a Template Site, i want to change the content of the IFrame
  based on the link clicked in javascript,
  but the error i get is if i change the 'src' attribute of the iframe
  the page gets reload.</p>
  
  <p>So my question is</p>
  
  <p>how to change iframe content without reloading the Page? below is my code</p>
  
  <p>// HTML part</p>
  
  <pre><code>&lt;li class="inside first"&gt;
     &lt;a href='JavaScript:void(0);' onclick='clicked(0);' title="HOME"&gt;HOME&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="inside"&gt;
     &lt;a  href=''onclick='clicked(1); ' title="PRODUCTS"&gt;PRODUCTS&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="inside"&gt;
     &lt;a  href='' onclick='clicked(2); ' title="SOLUTIONS"&gt;SOLUTIONS&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="inside"&gt;
      &lt;a  href=''  onclick='clicked(3); 'title="SERVICES"&gt;SERVICES&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="inside"&gt;
      &lt;a  href='' onclick='clicked(4); ' title="SUPPORT"&gt;SUPPORT&lt;/a&gt;
  &lt;/li&gt;
  
  &lt;div id="mainContent"&gt;
      &lt;iframe 
             src=''
             width="100%"
             height="100%"
             name='content'
             id='content'&gt;&amp;nbsp;
      &lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>//Javascript part</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     var index=0;
     var link_list= new Array('homepage.html','product.html','solution.html',
              'services.html','support.html','event.html',
               'partner.html','company.html');
  
     var frame=document.getElementById('content');
  
     frame.src=link_list[index];
  
     function clicked(key)
     {
  
         // The following line is redirecting the page
         frame.src=link_list[key];
         return false;
     }
     &lt;/script&gt;
  </code></pre>