js控制父子页面传值(iframe和window.open)
在html中,window对象代表浏览器中一个打开的窗口,就像我们C/S中做窗体一样,在该页的window对象就是new了一个新的窗体对象。
就像做C/S开发一样,浏览器是一个软件,每一个网页都是它new的一个对象,对象与对象的信息交流只能通过方法(前提是在自己的对象域中,当然如果两个对象在同一个作用域中,就不用那么麻烦了,但是每一个网页都是一个对象,在本对象内部作用域去访问另一个对象,就需要有到公共的方法,并且两个对象都可以接受到的。就是在后台才会有的request和response等方法)。
所以本节讨论的:主要是在窗体自己作用域内父子页面传值,有两点
- iframe是html中的一个标签,也就是window对象的一个成员(尽管它是网页),对象与成员之间的信息传递是简单的
- js脚本window.open(网页路径),就是window对象new了一个window对象,open实际也是window对象的成员,但是它与iframe不同的是它是一个匿名对象。
页面传值方法:
1. iframe
子页面获取父页面对象方法:window.parent
父页面获取子页面对象方法:window.frames[iframe对象的name值]
2. window.open()
子页面获取父页面对象方法: window.opener
参考页面:http://www.jb51.net/article/25629.htm
代码参考:
1.父页面代码(father.html)
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <script src="../js/jquery-1.10.2.js"></script>
- <title></title>
- <script type="text/javascript">
- function sayOpen()
- {
- alert("I am father(设置或获取创建当前窗口的窗口的引用)");
- }
- function sayFrame() {
- alert("I am father(获取对象层次中的父窗口)");
- }
- function getIframe()
- {
- window.frames["one"].showSon();
- window.frames["two"].showIframe();
- }
- </script>
- </head>
- <body>
- 该页面是被创建的页面:<a href="#" onclick="window.open('son.html')">创建子页</a><br />
- <br />
- <input type="button" onclick="getIframe()" value="获取子页" />
- <br />
- <iframe name="one" frameborder="0" src="son.html">
- </iframe>
- <iframe name="two" frameborder="0" src="iframe_one.html">
- </iframe>
- </body>
- </html>
2.子页面代码
(son.html和iframe_one.html)
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <script type="text/javascript">
- function showSon() {
- alert("I am son");
- }
- </script>
- </head>
- <body>
- <input type="button" onclick="window.opener.sayOpen()" value="创建页单击事件" /><br />
- <input type="button" onclick="window.parent.sayFrame()" value="Iframe页单击事件" /><br />
- </body>
- </html>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <script type="text/javascript">
- function showIframe() {
- alert("I am iframe");
- }
- </script>
- </head>
- <body>
- 我是子页iframe
- </body>
- </html>
iframe标签常用设置:
<iframe height="300px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" src="../../../EFM/Model.aspx" style="overflow-x:visible;overflow-y:visible"></iframe>
js控制父子页面传值(iframe和window.open)的更多相关文章
- 【js】【图片显示】js控制html页面显示图片方式
js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...
- iframe 自适应高度、父子页面传值、回调
总结一下最近用iframe遇到的问题与解决办法: 结构:主页面main.html,里面套用iframe.iframe不能出现滚动条,自适应子页面高度.内容多了滚动条是main.html页面的. 1. ...
- JS原生父子页面操作
var api = frameElement.api; //当前 W = api.opener;//父页面 W.setPerSel(jsonStr); api.close(); //关闭窗口 js操 ...
- C#--父子页面传值、刷新(showModalDialog)
父页面: var obj = new Object(); obj.name="name"; var rtnValue=window.showModalDialog("ch ...
- 父子页面(iframe)相互获取对方dom元素
现在iframe的使用虽然开始越来越少,但是还是有牵涉到iframe的使用情况,特别是多个iframe互相嵌套,又要进行获取的情况. 现在整理了父子iframe之间互相获取的方式. (1)父页面获取子 ...
- js 控制框架页面跳转 top.location.herf = "url"
top.location.href和localtion.href有什么不同 top.location.href=”url” 在顶层页面打开url(跳出框架) self.locatio ...
- JS控制静态页面之间传递参数获取参数并应用
在项目中遇到这也一个问题: 有a.html和b.html. 1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用. 2.a ...
- JS 控制子页面刷新父页面
iframe里面的子页,用parent.location.href = parent.location.reload();如果是window.open 打开就用opener.location.relo ...
- mui 进行父子页面传值以及接收
1.在父级页面进行传值 (my) mui.openWindow({ url: 'a.html', id: 'a', extras: { my: 'listpub' },}); 2.自己页面接收值 mu ...
随机推荐
- Oracle 11g RAC database on ASM, ACFS or OCFS2
I see a lot of questions on shared file systems that can be used when people move from single instan ...
- Finding the Longest Palindromic Substring in Linear Time
Finding the Longest Palindromic Substring in Linear Time Finding the Longest Palindromic Substring i ...
- python 序列(list,tuple,str)基本操作
添加元素: mylist.append() mylist.extend([1, 2]) mylist.insert(1, "pos") 删除元素: mylist.remove(va ...
- 配置vim之插件
涉及linux平台下ctags, taglist插件 ctags是一个用于产生代码索引文件的插件,它产生的索引可以帮助我们更快的定位到特定位置. ctags支持很多语言,比如java, c, c++, ...
- VS EF Error: Configuration Error extension=".edmx" type="System.Data.Entity.Design.AspNet.EntityDesignerBuildProvider"
错误截图: Configuration Error :<add extension=".edmx" type="System.Data.Entity.Design. ...
- window.showModalDialog刷新父窗口和本窗口的方法及注意
window.showModalDialog刷新父窗口和本窗口的方法及注意: 一.刷新父窗口的方法: A.使用window.returnValue给父窗口传值,然后根据值判断是否刷新. 在w ...
- jQuery插件-jgcharts实现Javascript制作Google Charts
from:http://www.zz68.net/program/Ajax/2010/0415/1992.html jgcharts是一个基于jQuery的非常经典的Google Charts图表制作 ...
- POJ2823 Sliding Window(单调队列)
单调队列,我用deque维护.这道题不难写,我第二次写单调队列,1次AC. -------------------------------------------------------------- ...
- MongDb添加嵌套文档
想添加嵌套文档,就需要创建2个实体类.如下图 usermodel.Student = student; 其中Student的类型就是StudentModel: 第一个实体类 ...
- Dojo实现Tabs页报错(一)
1.在用Dojo写tab页的过程中出现了一些错误 dojo源码如下: <%-- Document : grid Created on : 2013-12-15, 18:05:47 Author ...