在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)
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>