如何在不重新加载页面的情况下更改帧源

Question

我正在创建一个模板网站，我想更改IFrame的内容基于javascript中点击的链接，但我得到的错误是，如果我更改iframe的"src"属性页面被重新加载。

所以我的问题是

如何在不重新加载页面的情况下更改iframe内容？下面是我的代码

//HTML部分

<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部分

<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>

Answer 1

只需为这些链接编写hrefs并添加属性target="content"。

这可以在没有javascript的情况下完成。

Answer 2

您的link_list错误，JavaScript区分大小写，它是new Array()，而不是new array():

var link_list = new Array(...);

使用数组文字[]就可以了：

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

如果你检查浏览器的JavaScript错误控制台，很容易发现这样的错误：

[09:16:09.208]数组未定义@file:///.../temp.html:34