js中top、self、parent

1.在应用iframe或者frameset的时候

  parent指的是父窗口。top指的是顶级的窗口。self指的是当前的窗口-window

window.self

功能:是对当前窗口自身的引用。它和window属性是等价的。

语法:window.self

注:window、self、window.self是等价的。

window.top

功能:返回顶层窗口,即浏览器窗口。

语法:window.top

注:如果窗口本身就是顶层窗口,top属性返回的是对自身的引用。

window.parent

功能:返回父窗口。

语法:window.parent

注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。

在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。

判断当前窗口是否在一个框架中:

<script type="text/javascript">
var b = window.top!=window.self;
document.write( "当前窗口是否在一个框架中:"+b );
</script>

你应当将框架视为窗口中的不同区域,框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架,一个单个的框架也可以分成其它多个框架,即所谓的嵌套框架。

 

2.在同一个页面中,使用js获取另一个iframe中的dom元素

  

parent.html
    
        <iframe id="myframe" name="myframe" src="http://localhost:888/child.html" frameborder="3" style="300;height:200;">
        </iframe>
        <iframe id="myframe0" src="http://localhost:888/child0.html" frameborder="3" style="300;height:200;" name="if2">
        </iframe>

    <script>  
        function init() {
            var obj1 = document.getElementById("myframe");
            console.log(obj1.src);
            //alert(obj1.window.document.myform.username.value);//错误  

            var obj2 = document.frames("myframe"); //获取报错
            console.log(obj2.window.document.myform.username.value);
            //alert(obj2.src);//错误  
        }  
        init()
    </script>

  

child0.html
     child0
    <div id="child0">123</div>

  

child.html
      <form name="myform">
        用户名:
        <input type="text" name="username" value="test" />
    </form>
    <script>
        console.log(parent.frames['if2'].document.getElementById("child0"))
        var b = window.top != window.self;
            document.write("当前窗口是否在一个框架中:" + b);
    </script>

  

原文地址:https://www.cnblogs.com/jcxfighting/p/8466278.html