zoukankan      html  css  js  c++  java
  • JavaScript中 window.parent 、window.top、window.self代表的含义

    在应用有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>

    没有人告诉你,生活会是这样:你工作无趣,你袋里没钱,你的爱情总是昙花一现;妈妈警告过你,会有这样的日子但她没有告诉你,世界将让你屈服。但是,别怕,有我在你身边,谁让我们是friends呢……
  • 相关阅读:
    Service(服务)简单使用
    Android设计模式——抽象工厂方法模式
    Android设计模式——工厂方法模式
    算法问题——递归算法
    Android设计模式——Builder(建造者)模式
    Android设计模式——单例模式
    蓝牙4.0权限问题
    Android 网络状态变化的监听
    RecyclerView的使用
    函数参数的引用传递与值传递
  • 原文地址:https://www.cnblogs.com/ChandlerVer5/p/js_window_top.html
Copyright © 2011-2022 走看看