更改iframe的内容 [英] Changing the content of iframe

问题描述

我有一个index.html页面，其主体中具有iframe，如下所示:

I have an index.html page with an iframe in the body like this:

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

src(位置，大小等)在index.html的开头定义为:

The src (position, size etc) is defined in the head of the index.html by:

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

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

and content is loaded into the iframe by targeting the iframe by calling separate pages - lets call them Page 1 and Page 2 - from a menu in the body of index.html like this

<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图像.

The first link is used to reload the whole site and shows not a tekst, but a neat home.gif image from the imgs submenu.

过去有种菜单或顶部框架在内容框架中加载不同页面的日子.

Kind of in days of old having a menu or top frame loading different pages in a content frame.

这可以正常工作，但是由于首先通过单击其他菜单链接之一将内容放入iframe中，所以当它本身加载的index.html页面被加载时，iframe中没有任何内容.我想要一个页面-当在第一个菜单链接中加载或重新加载index.html页面时，可以将它称为default.html加载到iframe中，并且我已经搜索了数小时而无法找到方法的答案./p>

This works fine, but as content is first put in the iframe by clicking one of the other menu links there is no content in the iframe when the index.html page it self is loaded. I would like a page - lets call it default.html loaded into the iframe when the index.html page is loaded or is reloaded from the first menu link, and I have searched for hours without being able to find an answer to how.

推荐答案

只需将onclick甚至添加到HREF链接即可；Page1和Page2

just add onclick even to the HREF links; Page1 and Page2

onClick:

$(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/

这篇关于更改iframe的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！