更改 iframe 的内容答案

【问题标题】：Changing the content of iframe更改 iframe 的内容
【发布时间】：2014-12-26 22:39:01
【问题描述】：

我有一个 index.html 页面，其正文中有一个 iframe，如下所示：

<iframe id=content name=content src="#content"></iframe>

src（位置、大小等）在 index.html 的头部定义：

#content {
position: relative;
top: 0;
left: 0;
border: 0;
height: 800px;
width: 80%;  
}

通过调用单独的页面来定位 iframe 将内容加载到 iframe 中 - 让我们称它们为第 1 页和第 2 页 - 从 index.html 正文中的菜单像这样

<ul>
<li> <a href="index.html"><img src="imgs/home.gif"></a> </li>
<li> <a href="page1.html" target="content">Page 1</a> </li>
<li> <a href="page2.html" target="content">Page 2</a> </li>
</ul>

第一个链接用于重新加载整个网站，显示的不是 tekst，而是来自 imgs 子菜单的整洁的 home.gif 图像。

在过去的日子里，有一个菜单或顶部框架在内容框架中加载不同的页面。

这很好用，但是由于首先通过单击其他菜单链接之一将内容放入 iframe，因此在加载 index.html 页面时 iframe 中没有内容。我想要一个页面 - 当 index.html 页面加载或从第一个菜单链接重新加载时，我们将其称为 default.html 加载到 iframe 中，并且我已经搜索了几个小时但无法找到如何找到答案。

【问题讨论】：

src 属性必须指向所需的页面，例如src="page1.html".
然后把#content中的定义放到iframe里面
抱歉 5 分钟的评论编辑超时.. 请改为阅读此内容：THX bvx89 - 工作！！！然后我只是删除#content并将定义放在iframe中，如下所示： iframe>
bvx89：我想感谢您的回答，但是您必须将其发布为答案，而不是评论。

标签： html iframe

【解决方案1】：

只需将 onclick 添加到 HREF 链接即可；第1页和第2页

点击：

$(document).ready(function(){
 $("#hPage1").click(function(){
  document.getElementById("iframename").src="page1.html";  
 });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<p><a id="hPage1" href="#" >page1</a></p>
<iframe id="iframename" src="/"></iframe>

查看工作示例：http://jsfiddle.net/vinokurov/gat5y20z/

【讨论】：