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.

So my question is

how to change iframe content without reloading the Page? below is my code

// HTML part

<li class="inside first">
   <a href='JavaScript:void(0);' onclick='clicked(0);' title="HOME">HOME</a>
</li>
<li class="inside">
   <a  href=''onclick='clicked(1); ' title="PRODUCTS">PRODUCTS</a>
</li>
<li class="inside">
   <a  href='' onclick='clicked(2); ' title="SOLUTIONS">SOLUTIONS</a>
</li>
<li class="inside">
    <a  href=''  onclick='clicked(3); 'title="SERVICES">SERVICES</a>
</li>
<li class="inside">
    <a  href='' onclick='clicked(4); ' title="SUPPORT">SUPPORT</a>
</li>

<div id="mainContent">
    <iframe 
           src=''
           width="100%"
           height="100%"
           name='content'
           id='content'>&nbsp;
    </iframe>
</div>

//Javascript part

<script type="text/javascript">
   var index=0;
   var link_list= new Array('homepage.html','product.html','solution.html',
            'services.html','support.html','event.html',
             'partner.html','pany.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;
   }
   </script>

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.

So my question is

how to change iframe content without reloading the Page? below is my code

// HTML part

<li class="inside first">
   <a href='JavaScript:void(0);' onclick='clicked(0);' title="HOME">HOME</a>
</li>
<li class="inside">
   <a  href=''onclick='clicked(1); ' title="PRODUCTS">PRODUCTS</a>
</li>
<li class="inside">
   <a  href='' onclick='clicked(2); ' title="SOLUTIONS">SOLUTIONS</a>
</li>
<li class="inside">
    <a  href=''  onclick='clicked(3); 'title="SERVICES">SERVICES</a>
</li>
<li class="inside">
    <a  href='' onclick='clicked(4); ' title="SUPPORT">SUPPORT</a>
</li>

<div id="mainContent">
    <iframe 
           src=''
           width="100%"
           height="100%"
           name='content'
           id='content'>&nbsp;
    </iframe>
</div>

//Javascript part

<script type="text/javascript">
   var index=0;
   var link_list= new Array('homepage.html','product.html','solution.html',
            'services.html','support.html','event.html',
             'partner.html','pany.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;
   }
   </script>

• javascript
• html

2 Answers 2

Just write hrefs for those links and add attribute target="content".

This can be done w/o javascript at all.

Your link_list is wrong, JavaScript is case-sensitive, it's new Array(), not new array():

var link_list = new Array(...);

Use the array literal [] and you're fine:

var link_list = ['homepage.html','product.html','solution.html',
            'services.html','support.html','event.html',
             'partner.html','pany.html'];

If you check your browser's JavaScript error console it's easy to find such errors:

[09:16:09.208] array is not defined @ file:///.../temp.html:34