比较大一点的WEB项目一般页面都会用到iframe,这样如何访问各个iframe的内容就显得比较重要,比如登陆页放在一个iframe中,而登陆状态显示页又放在同一个页面的另一个iframe中,那样的话在登陆的时候就得刷新另一个iframe中的登陆状态显示页,经本人一晚上GOOGLE+亲测,得如下代码,可通过javascript来访问或刷新同一个页面中不同iframe中的内容。
本样例共3个测试文件:index.html, ye1.html, ye2.html 各个文件源码如下:
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS框架测试</title>
</head>
<script language="javascript" type="text/javascript">
function fun()
{
window.frames["ye1"].document.getElementById("con1").innerHTML = "aaa"; // 设置子窗体中的内容
// window.frames["ye1"].location.reload(); // 刷新子窗体
}
</script>
<body>
<p>
<iframe src="ye1.html" name="ye1" width="200" height="120" scrolling="auto"></iframe>
<iframe src="ye2.html" name="ye2" width="300" height="120" scrolling="auto"></iframe>
</p>
<p>
<input type="button" name="Submit" value="改变frm1的内容" onclick="fun()" />
</p>
<div id="main"></div>
</body>
</html>
ye1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面一</title>
<script>
var i = Math.random();
document.write(i);
</script>
</head>
<body>
<p>页面一</p>
<div id="con1"></div>
</body>
</html>
ye1里加上一段javascript是为了方便在测试刷新的时候能看到效果,即每回刷新都随机生成一个数.
ye2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面一</title>
</head>
<script language="javascript" type="text/javascript">
function fun()
{
// window.parent.document.getElementById("main").innerHTML = "哎呀"; // 设置父窗体内的内容
// window.parent.frames["ye1"].location.reload(); // 刷新父窗体中的另一個子窗體
window.parent.frames["ye1"].document.getElementById("con1").innerHTML = "bbb"; // 设置父窗体中的另一个子窗体的内容
}
</script>
<body>
<p>页面二</p>
<p>
<input type="button" name="Submit" value="改变页面内容" onclick="fun()"/>
</p>
<div id="con2"></div>
</body>
</html>
运行index.html点击按钮即可看到效果,以上代码解决如下问题:
① 父窗体访问或刷新子窗体
② 子窗体访问或刷新父窗体
③ 同一个父窗体中的两个子窗体之间的相互访问或刷新
代码经测试在IE5.5, IE6, IE7, IE8 Beta 2, FireFox, Opera, Chrome浏览器上测试通过!
分享到:
相关推荐
在JavaScript编程中,有时我们需要获取Iframe(内联框架)中的内容,这在处理嵌套页面、跨域通信或者实现动态加载时非常常见。本文将详细介绍如何在各种浏览器,包括Internet Explorer(IE)和Firefox(FF)等主流...
在网页开发中,`iframe`(Inline Frame)是一种嵌入其他网页的元素,常用于实现页面内嵌、组件化布局或者加载外部资源。然而,由于`iframe`内容加载后可能会有不同的高度,如果不能自适应调整,可能会导致页面布局...
在网页开发中,`iframe`(Inline Frame)是一种嵌入其他网页的标签,常用于将外部内容如视频、地图或文章等内容嵌入到当前页面中。然而,由于`iframe`的大小固定,当嵌入的页面内容高度或宽度超过`iframe`设定的尺寸...
标题 "拖拽一个iframe中的div 在另一个iframe页面中显示" 描述了在Web开发中一个交互性的技术,涉及跨框架(iframe)通信和DOM操作。这个技术主要应用于创建富交互的用户界面,允许用户在不同的iframe之间传递和操作...
在网页开发中,有时我们需要在不同的页面或者框架之间进行交互,比如子页面操作父页面的数据,或者在一个iframe中访问另一个iframe中的内容。这种情况在实际应用中很常见,尤其是在构建复杂Web应用时。以下是对"子...
iframe 中的内容是由另一个域名下的网页提供的,这意味着我们无法直接访问 iframe 中的内容。这是由于同源策略(Same-Origin Policy)的限制。 同源策略是浏览器的一种安全机制,用于防止不同域名下的网页之间的...
在本压缩包"javascript经典特效---Iframe页面的滚动.rar"中,重点是讲解如何利用JavaScript来控制Iframe中的页面滚动。 Iframe,全称Inline Frame,是一种在HTML文档中嵌入另一个HTML文档的方式。它常用于在网页中...
在HTML代码中,我们需要创建一个`<iframe>`元素,并为其设置一个ID以便于JavaScript访问。例如: ```html <!DOCTYPE html> 主页面 <script src="com.js"></script> <iframe id="draggableIframe" src="frm...
JavaScript中的iframe和parent之间的交互是Web开发中一个重要的知识点,特别是在构建复杂的网页应用或实现跨域通信时。本文将深入探讨这个主题,并结合标签“源码”和“工具”,给出实际应用示例。 首先,iframe...
4. JavaScript操作iframe:可以通过JavaScript访问iframe对象并控制其内容。例如,可以通过document.frames['frameName']或者document.getElementById('frameId')获取iframe元素,然后可以修改其location属性,从而...
在Web开发中,`iframe` 是一种非常有用的HTML元素,它允许我们在一个页面中嵌入另一个页面的内容。然而,当涉及到跨域时,`iframe` 遇到的问题之一就是无法正常访问父页面或被嵌入页面的`session`。这是因为浏览器的...
在网页开发中,`iframe`(Inline Frame)是一种嵌入式框架,用于在单个HTML文档中嵌入另一个HTML文档。这种技术常被用来实现页面的分层展示、加载外部内容或者实现局部刷新等效果。在多页面交互的场景下,`iframe`中...
在本资源"javascript经典特效---IFRAME间链接变换.rar"中,我们聚焦于一个特定的JavaScript特效:如何在多个IFRAME之间进行链接的变换。 IFRAME(Inline Frame)是HTML中的一个元素,它允许在一个页面中嵌入另一个...
在Web开发中,页面间的交互是一个常见的需求,特别是在涉及到iframe(内联框架)时。"子页面访问父页面"和"跨iframe访问"是两个重要的技术概念,它们允许不同层级或者独立的HTML文档之间进行通信。这篇博客文章《子...
本文将详细介绍如何通过JavaScript(简称JS)来获取一个内嵌在当前页面中的iframe的内容。这种方法特别适用于那些需要动态加载或更新iframe内部数据的应用场景。我们将从基本原理出发,逐步深入到具体的实现细节,并...
在网页开发过程中,经常遇到的一个问题是当嵌入在`iframe`中的内容出现错误时,如何让用户直接看到这个错误所在的框架或者跳转到一个特定的页面。这个问题涉及到前端JavaScript以及后端.NET(如C#)的处理方式。下面...
在网页开发中,`<iframe>`元素是一种非常实用的工具,它允许我们在一个页面中嵌入另一个页面的内容,实现页面的组合或者隔离加载。然而,`<iframe>`的高度自适应问题常常困扰着开发者,尤其是当`<iframe>`内部的内容...
在网页开发中,`iframe`(Inline Frame)是一种非常有用的元素,它允许我们在一个HTML文档中嵌入另一个HTML文档。这种技术常用于实现页面部分的动态加载、展示外部内容或进行页面间的通信。当我们需要从多个`iframe`...
在具体的实现过程中,需要注意iframe中的内容必须和主页面出于同一个域中,否则会受到浏览器同源策略的限制,无法获取到其中的DOM元素。这是因为浏览器安全策略不允许跨域访问DOM。 首先,确保iframe元素在HTML页面...
在Web开发中,`iframe`(Inline Frame)是一种嵌入网页的HTML元素,它允许我们在一个页面中加载另一个页面的内容。这种技术常用于实现页面组件、广告展示、地图集成等功能。然而,当`iframe`中的页面与包含它的主...