在html中,window对象代表浏览器中一个打开的窗口,就像我们C/S中做窗体一样,在该页的window对象就是new了一个新的窗体对象。

就像做C/S开发一样,浏览器是一个软件,每一个网页都是它new的一个对象,对象与对象的信息交流只能通过方法(前提是在自己的对象域中,当然如果两个对象在同一个作用域中,就不用那么麻烦了,但是每一个网页都是一个对象,在本对象内部作用域去访问另一个对象,就需要有到公共的方法,并且两个对象都可以接受到的。就是在后台才会有的request和response等方法)。

所以本节讨论的:主要是在窗体自己作用域内父子页面传值,有两点

  1. iframe是html中的一个标签,也就是window对象的一个成员(尽管它是网页),对象与成员之间的信息传递是简单的
  2. 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)

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <script src="../js/jquery-1.10.2.js"></script>
  6. <title></title>
  7. <script type="text/javascript">
  8. function sayOpen()
  9. {
  10. alert("I am father(设置或获取创建当前窗口的窗口的引用)");
  11. }
  12. function sayFrame() {
  13. alert("I am father(获取对象层次中的父窗口)");
  14.  
  15. }
  16. function getIframe()
  17. {
  18. window.frames["one"].showSon();
  19. window.frames["two"].showIframe();
  20. }
  21. </script>
  22. </head>
  23. <body>
  24. 该页面是被创建的页面:<a href="#" onclick="window.open('son.html')">创建子页</a><br />
  25. <br />
  26. <input type="button" onclick="getIframe()" value="获取子页" />
  27. <br />
  28. <iframe name="one" frameborder="0" src="son.html">
  29. </iframe>
  30. <iframe name="two" frameborder="0" src="iframe_one.html">
  31. </iframe>
  32. </body>
  33. </html>

2.子页面代码

(son.html和iframe_one.html)

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title></title>
  6. <script type="text/javascript">
  7. function showSon() {
  8. alert("I am son");
  9. }
  10. </script>
  11. </head>
  12. <body>
  13. <input type="button" onclick="window.opener.sayOpen()" value="创建页单击事件" /><br />
  14. <input type="button" onclick="window.parent.sayFrame()" value="Iframe页单击事件" /><br />
  15.  
  16. </body>
  17. </html>
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title></title>
  6.  
  7. <script type="text/javascript">
  8. function showIframe() {
  9. alert("I am iframe");
  10. }
  11. </script>
  12.  
  13. </head>
  14. <body>
  15. 我是子页iframe
  16. </body>
  17. </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)的更多相关文章

  1. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  2. iframe 自适应高度、父子页面传值、回调

    总结一下最近用iframe遇到的问题与解决办法: 结构:主页面main.html,里面套用iframe.iframe不能出现滚动条,自适应子页面高度.内容多了滚动条是main.html页面的. 1.  ...

  3. JS原生父子页面操作

    var api = frameElement.api;  //当前 W = api.opener;//父页面 W.setPerSel(jsonStr); api.close(); //关闭窗口 js操 ...

  4. C#--父子页面传值、刷新(showModalDialog)

    父页面: var obj = new Object(); obj.name="name"; var rtnValue=window.showModalDialog("ch ...

  5. 父子页面(iframe)相互获取对方dom元素

    现在iframe的使用虽然开始越来越少,但是还是有牵涉到iframe的使用情况,特别是多个iframe互相嵌套,又要进行获取的情况. 现在整理了父子iframe之间互相获取的方式. (1)父页面获取子 ...

  6. js 控制框架页面跳转 top.location.herf = "url"

    top.location.href和localtion.href有什么不同 top.location.href=”url”          在顶层页面打开url(跳出框架) self.locatio ...

  7. JS控制静态页面之间传递参数获取参数并应用

    在项目中遇到这也一个问题: 有a.html和b.html. 1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用. 2.a ...

  8. JS 控制子页面刷新父页面

    iframe里面的子页,用parent.location.href = parent.location.reload();如果是window.open 打开就用opener.location.relo ...

  9. mui 进行父子页面传值以及接收

    1.在父级页面进行传值 (my) mui.openWindow({ url: 'a.html', id: 'a', extras: { my: 'listpub' },}); 2.自己页面接收值 mu ...

随机推荐

  1. 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 ...

  2. Finding the Longest Palindromic Substring in Linear Time

    Finding the Longest Palindromic Substring in Linear Time Finding the Longest Palindromic Substring i ...

  3. python 序列(list,tuple,str)基本操作

    添加元素: mylist.append() mylist.extend([1, 2]) mylist.insert(1, "pos") 删除元素: mylist.remove(va ...

  4. 配置vim之插件

    涉及linux平台下ctags, taglist插件 ctags是一个用于产生代码索引文件的插件,它产生的索引可以帮助我们更快的定位到特定位置. ctags支持很多语言,比如java, c, c++, ...

  5. VS EF Error: Configuration Error extension=".edmx" type="System.Data.Entity.Design.AspNet.EntityDesignerBuildProvider"

    错误截图: Configuration Error :<add extension=".edmx" type="System.Data.Entity.Design. ...

  6. window.showModalDialog刷新父窗口和本窗口的方法及注意

    window.showModalDialog刷新父窗口和本窗口的方法及注意:   一.刷新父窗口的方法:    A.使用window.returnValue给父窗口传值,然后根据值判断是否刷新. 在w ...

  7. jQuery插件-jgcharts实现Javascript制作Google Charts

    from:http://www.zz68.net/program/Ajax/2010/0415/1992.html jgcharts是一个基于jQuery的非常经典的Google Charts图表制作 ...

  8. POJ2823 Sliding Window(单调队列)

    单调队列,我用deque维护.这道题不难写,我第二次写单调队列,1次AC. -------------------------------------------------------------- ...

  9. MongDb添加嵌套文档

         想添加嵌套文档,就需要创建2个实体类.如下图 usermodel.Student = student; 其中Student的类型就是StudentModel: 第一个实体类         ...

  10. Dojo实现Tabs页报错(一)

    1.在用Dojo写tab页的过程中出现了一些错误 dojo源码如下: <%-- Document : grid Created on : 2013-12-15, 18:05:47 Author ...