比较大一点的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给定义一个window.name,并赋予一个字符串值,如window.name="test",其中赋予的字符串值可以随意定义,然后在Iframe页面的Form 标签中定义target属性,并且其值也必须与之前定义的window....
又例如第三方网站使用了瀑布流插件,要滚动加载自动计算高度,那么先说跨域:iframe主域名不同跨域方法,假如网站 A.com B.com A 里面放入一个iframe 引用了B.com,这种情况下B.com里面的Js是无法访问到A.com的。...
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...
这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。 框架间的互相引用 一个页面中的所有框架...
在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载。iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的...
第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 1.2.5 数值...
最近在处理几个项目中都用到了iframe,有时一个页面中有多个iframe,而且几个iframe需要相互访问彼此的函数或者父窗口的函数。今天有空就将页面框架编程做个整理。 一个页面中的所有框架以集合的形式作为window对象...
需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法。 1. 在top页面中建立方法供内部页面使用 代码...
方案:在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理,然后通过iframe的document.getElementById(“proxy”).contentWindow对象来请求ajax。 服务器端的代理页面: 代码如下: <!DOCTYPE ...
那么通过这个特征,我们可以在子页面中,把自身的window对象传递给父页面就可以了,这样父页面就很轻松的访问子页面,再也不用靠虑如何从iframe对象上得到window对象了。 二话不说,我们先看代码: 父页面代码: ...
数组中的每一个元素(从索引 0 开始到最高索引结束)均会转换为一个连接字 符串,并以逗号分隔。若要指定自定义的分隔符,请使用 Array.join() 方法。 可用性:ActionScript 1.0;Flash Player 5 返回 String - 一...
因此,预览框使用户可以快速访问/查看另一个页面的内容,而无需单击 href 链接在当前窗口或新窗口中打开另一个页面。 在这里试试 => 不需要任何额外的库/框架 预览框不依赖于其他库或框架。 支持手机/平板使用场景...
第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 1.2.5 数值...
最近的一个项目中,需要通过 JavaScript 提交表单数据到另一个域名下的PHP接口(因为数据较大,需要HTTP POST方式提交),并获取PHP接口的返回值,在页面无刷新、无跳转的情况下,更新div标签内的内容。 浏览器...
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个...
-修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...
本文实例讲述了JavaScript同源策略和跨域访问。分享给大家供大家参考,具体如下: 1. 什么是同源策略 理解跨域首先必须要了解同源策略。...比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如
-修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。 JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据...