JavaScript中 window.parent 、window.top、window.self代表的含义

mac2022-06-30  288

在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。

      在项目中,有如下应用场景,原本在右侧iframe中引入对话框js类,对话框能出来但是只能在右侧iframe中移动,不能在整个页面内移动。

     解决如下:

     将对话框js类引入到最外层jsp中,然后在原调用出,使用

new window.top.SGS.UI.Control.CommDialog(); window.top.document.body.appendChild(_dialog.divObj);

此次window.top是最顶级父窗口含义。

下面实例:

top作用是取得最顶层框架对象

A.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>prototype test</title> </head> <body> <iframe src="b.html"></iframe> <script language="javascript"> var topstr = "my top"; alert(a.html='+top.location.href); </script> </body> </html>

B.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>prototype test</title> </head> <body> <iframe src="c.html"></iframe> <script language="javascript"> alert('b.html='+top.location.href+";a.html.topstr="+top.topstr);//top.topstr可取a.html(顶层框架参数)的topstr变量 </script> </body> </html>

C.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>prototype test</title> </head> <body> <script language="javascript"> alert('c.html='+top.location.href+";a.html.topstr="+top.topstr);//top.topstr可取a.html(顶层框架参数)的topstr变量 </script> </body> </html>

b.html中的top=parent c.html中的top=parent.parent

 

<摘自:http://wangpj.iteye.com/blog/853395 & http://blog.csdn.net/good_youth/article/details/2079416>

转载于:https://www.cnblogs.com/ChandlerVer5/p/js_window_top.html

相关资源:JAVA上百实例源码以及开源项目

最新回复(0)