如何通过按钮切换<iframe>内的HTML内容（不跳转主页面）

左侧带占位文本的区域是我的<iframe>，右侧是菜单。当前菜单按钮点击后会直接打开新HTML页面，希望点击按钮时不跳转主页面，仅切换<iframe>内的内容。

原<iframe>代码及样式 #

<div id="vulling">                                              
     <div id="iframe">                                                    
          <iframe src="iframe/index.html" width="950px" height="590px" frameborder="0" name="iframe_a">Iframes worden niet ondersteund door deze browser.
          </iframe>                                                                               
</div>

#iframe {
margin-top: 25px;
margin-bottom: 0px;
margin-left: 25px;
margin-right: 0px;
overflow:hidden;
}

原按钮代码及样式 #

<div id="menu">                                                    
  <p id="menu">                                                       
    <a href="index.html"><button class="btn">Home</button><br></a>    
    <a href="ontwerpen.html"><button class="btn">Ontwerpen</button><br></a>   
    <a href="tekeningen.html"><button class="btn">Tekeningen</button><br></a>  
    <a href="links.html"><button class="btn">Links</button><br></a>  
 </p>                                         
</div>

.btn {
  border: none;
  background-color: inherit;
  padding: 10px;
  font-size: 40px;
  cursor: pointer;
  display: inline-block;
}

只需给菜单里的<a>标签添加target属性，值设为你的<iframe>的name属性值（此处为iframe_a），即可让链接在指定iframe内加载内容，不会跳转主页面。

修改后的按钮代码 #

<div id="menu">                                                    
  <p id="menu">                                                       
    <a href="index.html" target="iframe_a"><button class="btn">Home</button><br></a>    
    <a href="ontwerpen.html" target="iframe_a"><button class="btn">Ontwerpen</button><br></a>   
    <a href="tekeningen.html" target="iframe_a"><button class="btn">Tekeningen</button><br></a>  
    <a href="links.html" target="iframe_a"><button class="btn">Links</button><br></a>  
 </p>                                         
</div>

原理说明 #

• <iframe>的name属性是该框架的唯一标识
• <a>标签的target属性指定链接内容的加载目标，当值与iframe的name匹配时，链接内容就会在这个iframe内打开，而非替换当前主页面

内容的提问来源于stack exchange，提问作者Gino Berkers