JavaScript權威設計--Window對象之Iframe(簡要學習筆記十四)


1.Window對象屬性的文檔元素(id)
如果在HTML文檔中用id屬性來為元素命名,並且如果Window對象沒有此名字的屬性,Window對象會賦予一個屬性,它的名字是id屬性的值,而他們的值指向表示文檔元素的HTMLElement對象。
Window對象是以全局對象的形式存在於作用域鏈的最上層,這就意味着HTML文檔中使用的id屬性會成為可以被腳本訪問的全局變量。
如:
<button id="but"/>
就可以通過全局變量but來引用此元素。
 
2.多窗體窗口(iframe)
不同於相互獨立的標簽頁,嵌套的瀏覽上下文之間並不是相互獨立的,在一個窗體
中運行的JavaScript程序總是可以看見它的祖先和子孫窗體。盡管腳本查看這些窗體中的文檔
受到同源策略的限制。
類似於一個網頁中嵌套了一個或者多個<iframe>,這多個iframe之間的交互。
 
a:window.open(URL,name,features,replace)
 
 
下圖是第三個參數:
 
 
例子:
<html>
<head>
<script type="text/javascript">
function open_win() { window.open("http://www.baidul.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400") } </script>
</head>

<body>
<form>
<input type="button" value="打開窗口" onclick="open_win()">
</form>
</body>

</html>
 
窗口名字:
 
 
window.open()載入制定的URL到新的或已存在的窗口中,並返回代表那個窗口的Window對象。
需要注意的是:腳本是無法通過簡單的猜測窗口的名字來操控這個窗口的web應用,只有設置了"允許導航"的頁面才可以這樣。
簡單的說,當且僅當窗口包含的文檔來自相同的源或者是這個腳本打開了那個窗口,腳本才可以只通過名字來制定存在的窗口。還有,如果其中一個窗口是內嵌在另外一個窗口里的窗體,那么在他們的腳本之間就可以相互導航。就可以使用保留字"_top"(頂級祖先窗口),"_parent"(直接父級窗口)來獲取彼此的瀏覽上下文。
 
Window對象的方法open()返回代表新創建的窗口的Window對象。而且這個心窗口具有opener屬性,該屬性可以打開它的原始窗口。
如:
 
//window.open()所在頁面是zqz_1.html,
var w=window.open('zqz_2.html');
//打開新的窗口zqz_2.html w.open().opener===w
//即opener所指的是zqz_1.html
 
b: 嵌套iframe
如圖:
如果一個窗口是頂級窗口或標簽,那么
parent==self //只有頂級窗口還會返回true
如果一個窗口包含在窗口的窗口中,那么parent.parent來引用頂級窗口
無論一個窗體被嵌套了幾層,使用top直接返回頂級窗口。
 
見圖1,2,3,4
一個網頁中嵌套了一個iframe,該iframe的id='zqz_2',那表示該元素的對象就是:
var zqz_2=document.getElementById('zqz_2');
 
<iframe>元素有contentWindow屬性,引用該窗體的window對象,所以該窗體對象就是:
var zqz_2=document.getElementById('zqz_2').contentWindow;
 
每一個Window對象都有一個frames屬性,它引用自身包含的窗體的子窗口。
frames屬性是類數組對象。類數組對象我們前面說過。所以可以通過索引進行獲取,即:frames[0]。使用parent.frames[1]引用兄弟窗體。
注意:frames[]數組里的元素是Window對象,而不是<iframe>元素。
 
如果指定<iframe>元素的名字,還可以用名字來索引。如:frames["zqz_2"]或frames.zqz_2
 
對於窗體來說,通過Window對象的屬性引用的<iframe>是指窗體中的Window對象,而不是元素對象。
HTML5規范指出frames屬性是一個自引用的屬性,而這個window對象看起來像一個由窗體組成的數組。即:可以通過window[0]來獲取第一個子窗體的引用。window.length。
 
3.多窗體交互
直接上例子:
 
父調用子,子調用父,子調用子。
 
ZQZ.html(父)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ZQZ</title>
    <style>


    </style>
</head>
<body>

<iframe src="ZQZ_1.html" name="A" width="200px" height="300px"></iframe>
<iframe src="ZQZ_2.html" name="B" width="200px" height="300px"></iframe>

</body>
<script>

    //父調用子
 window.onload=function(){ frames.B.a(); alert(frames.B.b); }; //子調用父
    function c(){ alert("子調用父方法c()"); } var d="子調用父變量d"; </script>
</html>

 

 

ZQZ_1.html(子)

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ZQZ_1</title>
</head>
<body bgcolor="#a52a2a"> A </body>

<script>

    //子調用子
    var i=1; alert(window.i);//i這個全局變量是全局對象那個的而一個屬性,也是Window對象的一個屬性。所以也可以這么調用
    function a() { alert("A中的函數a被調用"); } </script>
</html>

 

 

 

 

ZQZ_2.html(子)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ZQZ_2</title>
</head>
<body bgcolor="#ff7f50"> B </body>
<script>

    //子調用子
 alert(parent.A.i); //在name=“B”中調用A中的全局變量i
 parent.A.a(); //在name="B"中調用A中的函數a()

    //父調用子
    var b="父調用子b變量"; function a(){ alert("父調用子a方法"); } //子調用父
 parent.c(); alert(parent.d); </script>
</html>

 

雖然上面在B中調用了A中的函數a(),但是a()的作用域依舊在A中。
也即:函數在定義它中的定義域中執行,而不是在調用它的作用域中執行。
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM