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

時間 2019-11-19

標籤 javascript 權威設計 window 對象 iframe 簡要學習筆記十四欄目 JavaScript 简体版

原文原文鏈接

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');

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(子)javascript

<!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(子)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>