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="width:300;height:200;">
        </iframe>
        <iframe id="myframe0" src="http://localhost:888/child0.html" frameborder="3" style="width: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>