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

Answer 1

只需为这些链接编写href，然后添加属性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] array is not defined @ file:///.../temp.html:34

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

2 个答案: