How to change frame source without reloading the page

Question

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','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;
   }
   </script>

score 5 · Answer 1 · answered Mar 15 '12 at 08:20

5

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

This can be done w/o javascript at all.

answered Mar 15 '12 at 08:20

kirilloid

12,843
5
36
50

`Link ` is opening in new tab – Naveen Kumar Mar 15 '12 at 12:15
Erm... `target='content'` w/o `.html`. It's the name of your frame. Whilst `href` attribute should be set to corresponding hrefs. – kirilloid Mar 15 '12 at 17:36

score 1 · Answer 2 · edited May 23 '17 at 12:27

1

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','company.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

edited May 23 '17 at 12:27

Community

1
1

answered Mar 15 '12 at 08:17

Zeta

95,453
12
173
214

Also single quots are not a part of HTML. Switch them to double quots. – Teemu Mar 15 '12 at 08:22
1

@Teemo: What are you talking about? Both HTML and JavaScript support both single and double quotes. – Aaron Digulla Mar 15 '12 at 08:26
@AaronDigulla Have I missed something? Since when this HTML-support has been available? – Teemu Mar 15 '12 at 08:35
1

@Teemu: Since [HTML 2](http://tools.ietf.org/html/rfc1866#section-3.2): "The value of the attribute may be \[..\] A string literal, delimited by single quotes or double quotes and not containing any occurrences of the delimiting character". See also [HTML4 attributes](http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.2). – Zeta Mar 15 '12 at 08:42
HTML is a successor of SGML, so it always supported that. See "3.2.4. Attributes" of the first RFC: http://tools.ietf.org/html/rfc1866 – Aaron Digulla Mar 15 '12 at 08:42
I'm amazed! Thanks for the comments. – Teemu Mar 15 '12 at 08:49

How to change frame source without reloading the page

2 Answers2