家好，我是 Echa。

今天來分享 50 個超實用的 Chrome 瀏覽器擴展！

JSON

1. JSON Viewer Pro

JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：

• 支持將JSON數據進行格式化，并使用屬性或者圖表進行展示；
• 使用面包屑深入遍歷 JSON 屬性；
• 在輸入區寫入自定義 JSON；
• 導入本地 JSON 文件；
• 使用上下文菜單下載 JSON 文件；
• 網址過濾器；
• 改變主題；
• 自定義 CSS ；
• 復制屬性和值；

輸入界面如下：

格式化之后：

2. JSONVue

JSONVue 是一個JSON數據查看器，主要用來格式化JSON數據：

網站技術

3. Library Sniffer

Library Sniffer 是一款給開發者使用的工具，能夠探測當前網頁所使用的類庫、框架和服務器環境，為開發者提供了方便。

4. Wappalyzer

Wappalyzer 擴展可以用來識別網站背后的底層技術。通過此擴展，可以了解特定應用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關 Web 服務器、編程語言、框架、內容管理系統、分析的信息工具、數據庫等。

5. WhatRuns

WhatRuns 擴展程序只需單擊一下即可找到任何網站上使用的技術。

開發調試

6. PerfectPixel by WellDoneCode

使用PerfectPixel插件可以將設計圖加載至網頁中，與已成型的網頁進行重疊對比，以幫助開發和設計人員規范網頁像素精度。這是一款可以優化前端頁面顯示的Chrome插件。

7. Clear Cache

可以使用此擴展程序快速清除緩存，無需任何確認對話框、彈出窗口等?？梢栽谶x項頁面上自定義要清除的數據和數量，包括：應用程序緩存、緩存、Cookie、下載、文件系統、表單數據、歷史記錄、索引數據庫、本地存儲、插件數據、密碼和 WebSQL。

8. VisBug

VisBug 是一個使用 JavaScript 構建的開源網頁設計調試工具，它可以讓用戶使用點擊式和拖放式界面來查看網站的元素。

9. Debug CSS

Debug CSS 是一個幫助調試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標懸浮在元素上，即可查看其信息：

10. CSS Viewer

CSS Viewer 是一款適用于 Web 開發人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標懸停在任何網頁上的元素的 CSS 屬性。

11. EditThisCookie

EditThisCookie 是一個 cookie 管理器?？梢蕴砑?，刪除，編輯，搜索，鎖定和屏蔽cookies。

12. React Developer Tools

React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發者工具中檢查 React 組件層次結構。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：

• Components 選項卡顯示了在頁面上呈現的根 React 組件，以及它們最終呈現的子組件；
• Profiler 選項卡用來記錄性能信息。

13. Vue.js devtools

Vue.js devtools 是一款基于chrome瀏覽器的用于調試Vue.js應用程序的插件，可以使得開發人員大大提高調試效率。支持用戶對DOM結構數據結構進行解析和調試功能。

14. Augury

Augury 可以幫助開發人員在 Google Chrome 瀏覽器中調試和分析 Angular 應用程序。

15. Firebug Lite for Google Chrome

Firebug Lite是火狐瀏覽器中著名的開發者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調試網頁內容，其包含了基本的HTML、CSS以及Javascript的調試功能，用于幫助網頁前端開發工程師快速地調試網頁，以便及時地找到網頁中的BUG并及時修復。

16. HTML Validator

HTML Validator 在 Chrome 的開發者工具中添加了 HTML Validator。HTML 頁面的錯誤數通過瀏覽器狀態欄中的圖標顯示，詳細信息可以在瀏覽器的開發者工具中查看。

17. Web Developer

Web Developer 擴展為帶有各種 Web 開發工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。

18. Requestly

Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉發、修改HTTP請求和結果、插入腳本等功能。

19. Window Resizer

Window Resizer 主要用來調整瀏覽器窗口的大小以模擬各種屏幕分辨率。

20. Responsive Viewer

Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發人員在開發響應式網站/應用程序時測試多個屏幕。

21. Moesif Origin & CORS Changer

此插件允許直接從瀏覽器發送跨域請求，而不會收到跨域錯誤?？梢允褂么瞬寮采w Request Origin 標頭，并將 Access-Control-Allow-Origin 設置為 *.

22. ColorPick Eyedropper

ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網頁等中選擇顏色值。

23. CSSPeeper

CSS Peeper 用于檢查和復制元素樣式的優秀工具，使用 CSSPeeper 可以將鼠標懸停在網頁中的任何元素上，然后單擊鼠標即可復制元素的樣式。

24. Dimensions

Dimensions是一款能幫助使用者對網頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關閉該插件的功能，簡單實用。

25. Site Palette

Site Palette 用于生成調色板。設計師和前端開發人員必備的工具?？梢酝ㄟ^這款插件輕松獲取網站的配色方案。

26. ColorZilla

ColorZilla 是一款功能強大地提取網頁色彩的工具；也是個快速的對顏色進行調節的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產css顏色的代碼等。

• 吸管器-獲取頁面上任何像素或區域的顏色；
• 一個先進的顏色選擇器類似于可以在Photoshop和Paint Shop Pro中找到的；
• 網頁顏色分析器-分析任何網頁上的DOM元素顏色，找到相應的元素；
• 終極CSS梯度發生器；
• 調色板查看器與7預先安裝調色板；
• 顏色歷史最近挑選的顏色；
• 顯示標簽名稱，類別，編號，大小等元素信息；
• 光標下的輪廓元素；
• 自動將生成或采樣的顏色復制到CSS RGB，Hex和其他格式的剪貼板；
• 使用鍵盤快速采樣頁面顏色的鍵盤快捷鍵。

字體

27. WhatFont

當我們想查看網頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網頁字體的Chrome擴展。只需要的點擊擴展圖標，再點需要查看為文字即可：

28. Fonts Ninja

Fonts Ninja 可以從任何網站識別字體、添加書簽、試用并購買它們。

標簽頁

29. BrowserStack

使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設置 12 個瀏覽器以實現快速訪問并最大限度地減少切換瀏覽器所花費的時間。

30. Toby

Toby 是一款 Chrome 新標簽頁工具，能夠將未讀的標簽頁分組顯示在新標簽頁中，這樣就能把所有未看完的標簽頁都關閉了。分組相當于多個 Chrome 窗口，將你的標簽頁都拖進 Toby 中，就不需要實時開著占地方了。

31. daily.dev

該擴展提供了每日熱門開發者新聞，不需要再浪費時間搜索高質量的文章了。

32. Momentum

Momentum 擁有漂亮的新標簽頁面，每日更新精彩背景壁紙圖片，可設置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。

33. The Great Suspender

The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內存和 CPU。

34. Session Buddy

Session Buddy是一個可以幫助用戶查看、新增、編輯當前網站Session狀態的Chrome插件。用戶可以利用該插件保存網站當前的狀態以便在關閉Chrome或關閉計算機后恢復，從而達到節省內存的作用。

Github

35. Octotree

Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導航。Octotree 擴展解決了這個問題。此擴展在項目的左側顯示存儲庫的目錄結構，這有助于更好地理解文件夾結構。

1_EKF88oqIyX6FzgueCKdtXg.gif

36. File Icons for GitHub and GitLab

File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。

網頁測試

37. axe DevTools

ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發的世界上最值得信賴的可訪問性測試引擎 axe-core 驅動。使用 ax DevTools 在網站開發過程中查找并修復更多可訪問性問題。

38. OctoLinker

OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉換為鏈接。當打開一個包含多個導入語句的文件并且想要快速打開它時，只需將鼠標懸停在鏈接的文件上并單擊即可打開。

39. Web Developer Checklist

此擴展可幫助 Web 開發人員分析網頁是否違反最佳實踐。

40. Check My Links

Check My Links 是一個鏈接檢查器，它可以抓取網頁并查找損壞的鏈接。

41. Checkbot

Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務器上的單個文檔或一組文檔。它會創建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。

42. PageSpeed Insights

Google Page Speed Insighs 是一款旨在優化所有設備上的網頁、提高網頁加載速度的工具。

43. Meta SEO Inspector

META SEO inspector是一款可以幫助用戶分析網頁的meta信息并得到SEO評估的谷歌瀏覽器插件。

隱私廣告

44. Ghostery

Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：

• 攔截廣告：Ghostery 內置的廣告攔截工具可以移除網頁上的廣告，防止網頁雜亂無章，讓你專注于想看的內容。
• 保護隱私：利用 Ghostery 可以查看和攔截所瀏覽的網站上的跟蹤器，控制收集數據的跟蹤器。增強反跟蹤功能還能將數據匿名化，進一步保護隱私。
• 提高瀏覽速度：Ghostery 的智能攔截功能可以自動攔截和取消攔截跟蹤器來滿足網頁質量標準，提高網頁加載速度，優化網頁性能。

45. AdBlock

AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網站上攔截廣告和彈窗。

效率工具

46. Marinara

番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效

47. Loom

Loom 可以用來快速錄制視頻，并且能夠將錄制的視頻上傳到指定的網頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復制到粘貼板中存儲。

48. GoFullPage

GoFullPage 是一款全屏截圖插件（整個網頁截圖），完整捕獲您當前頁面的屏幕，進行滾動截圖，而無需任何額外的權限。單擊擴展程序圖標，然后將其傳輸到屏幕快照的新標簽頁中，可以在其中將其下載為圖像或PDF，甚至只需拖動即可，保存到桌面。

49. BetterViewer

BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標簽頁中打開圖片”即可。

50. svg-grabber

svg-grabber 是一個快速預覽并從網站獲取所有 svg 的工具。可以用來預覽、下載和復制網站中所有 SVG 圖標和插圖的代碼。

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

多窗口和窗體：

可以打開多個瀏覽器窗口，每個窗口都是獨立的；

一個瀏覽器窗口可能包含多個標簽頁；每個標簽頁都是獨立的上下文，都是獨立的window對象，而且相互之間互不干擾；

但是窗口也并不總是和其他窗口完全沒有關系；一個窗口或標簽頁中的腳本可以打開新的窗口或標簽頁，如此，這些多窗口或標簽頁就可以互相操作；

打開窗口：

window.open()方法，打開一個新的瀏覽器窗口、標簽頁，導航到一個指定的URL；

語法：window.open(url,name,features,replace)；url為打開新窗口的url，name為窗口目標,features設置窗口特性參數列表，replace為Boolean值，指定是否用新窗口替換當前頁面；

一般使用第一個參數，如果也省略該參數或使用空字符串，則會打開一個空頁面的URL about:blank；

如果使用第二個參數，而且該參數是已有窗口或框架的名稱，就會在該窗口或框架中加載指定的URL；否則彈出新窗口，并將新窗口的name命名為該參數，如果省略此參數，則會使用指定的“_blank”打開一個新的、未命名的窗口；

第二個參數也可以是：_self、_parent、_top、_blank；

窗口的名字也可作為<a>和<form>元素上target屬性的值，用來表示引用的文檔或提交處理的頁面；

<script>
window.open("https://www.zeronetwork.cn/","myWindow");
</script>
<a href="https://www.google.cn/" target="myWindow">baidu.com</a>

窗口特性屬性：

第三個參數是一個逗號分隔的設置字符串，表示在新窗口中都顯示哪些特性；如果省略，則以默認的形式呈現；

• fullscreen：yes / no，是否最大化；僅限IE；
• height：數值，新窗口的高，不能小于100；
• left：數值，新窗口的左坐標，不能是負值；
• location：yes / no，是否顯示地址欄；不同瀏覽器的默認值不同；設置為no，地址欄有可能會隱藏，也有可能會被禁用；
• menubar：yes / no，是否顯示菜單欄，默認為no；
• resizable：yes / no，是否能改變大小，默認為no ；
• scrollbars：yes / no，如果內容區域大于視口，是否允許滾動，默認為no；
• status：yes / no，是否顯示狀態欄，默認為no；
• toolbar：yes / no，是否顯示工具欄，默認為no；
• top：數值，新窗口的上坐標，不能是負值；
• width：數值，新窗口的寬，不能小于100；

字符串格式為：設置使用鍵值對，且全部使用逗號分隔，而且不能有空格；

window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");

顯式指定這些特性，打開的應該是新窗口，而不是新標簽頁；這個參數是非標準的，而且HTML5也主張瀏覽器應該忽略它；

另外，出于安全考慮，瀏覽器包含對可能指定的功能的限制，如，通常不允許指定一個太小的或者位于屏幕之外的窗口，并且一些瀏覽器不允許創建一個沒有狀態欄的窗口；

第四個參數只有在設置了第二個參數命名的是一個已存在的窗口時才有用；它是一個布爾值，聲明了由第一個參數指定的URL是替換掉窗口瀏覽歷史的當前記錄(true)還是應該在窗口瀏覽歷史中創建一個新的記錄(false)，默認為false；

window.open()會返回一個window對象，用于操作新創建的窗口；該引用可以操作新窗口的內容，從而就可以在一個窗口中控制另一個窗口的內容，例如向一個新開的瀏覽器窗口中輸出內容；

var w = window.open();  // 打開一個新的空白窗口
w.document.write("<h2>零點網絡</h2>");
w.alert("詳情請進入https://www.zeronetwork.cn/");
w.location = "https://www.zeronetwork.cn/";

某些瀏覽器在默認情況下可能不允許針對主瀏覽器窗口調整大小或移動，但不允許針對通過open()創建的窗口調整大小或移動，如：

var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");
newWindow.resizeTo(600,600);
newWindow.moveTo(200,200);

注：有些瀏覽器默認不允許這樣操作；

窗口opener屬性：

opener屬性是新窗口對打開它的原始窗口的引用；即指向調用window.open()的窗口或框架；但只在彈出窗口的最外層window對象(top)中有定義；

var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");
console.log(newWindow.opener === window); // true
 
<!-- 主窗口 -->
<input type="text" id="selectCity" placeholder="選擇" />
<script>
var selectCity = document.getElementById("selectCity");
selectCity.onclick = function(){
    var newWin = window.open("select.html","newWin","width=400,height=400");
}
</script>
 
<!-- 新窗口 -->
<select id="city">
    <option value="beijing">北京</option>
    <option value="nanjing">南京</option>
    <option value="anhui">安徽</option>
</select>
<script>
var city = document.getElementById("city");
city.onchange = function(){
    window.opener.document.getElementById("selectCity").value = city.options[city.selectedIndex].value;
    window.close();
}
</script>

有些瀏覽器(如IE8和Chrome)會在獨立的進程中運行每個標簽頁，當一個標簽頁打開另一個標簽頁時，如果兩個window對象之間需要彼此通信，那么新標簽頁就不能運行在獨立的進程中。在Chrome中，將新創建的標簽頁的opener屬性設置為null，即表示在單獨的進程中運行新標簽頁。

newWindow.opener = null;

標簽頁之間的聯系一旦切斷，將沒有辦法恢復。

window.close()關閉窗口：

對于主窗口，如果沒有得到用戶的允許是不能關閉它的；但彈出窗口可以不經用戶允許可以關閉自己；

窗口關閉后，窗口的引用仍然存在，可以使用window.closed屬性檢測，但在實際場景中沒有多大用處；

function openWin(){
    var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");
    newWindow.document.write("<h2>零點網絡</h2>");
    function closeWin(){
        newWindow.close();
        //alert(newWindow.closed);
        if(newWindow.close)
            alert("已關閉");
    }
    setTimeout(closeWin,3000);
}
openWin();

注：document對象也有close()方法，為了避免混淆，所以調用close()方法時，要顯式調用，即使用window.close()；

安全限制：

大多數瀏覽器針對彈出窗口實施了多方面的安全限制，如：不允許在屏幕之外創建彈出窗口，不允許將彈出窗口移動到屏幕之外，不允許關閉狀態欄等；不允許關閉地址欄，默認情況下不允許移動彈出窗口或調整其大?。换蛘卟糠譃g覽器不支持修改狀態欄，始終顯示地址欄等；

通常，對于open()方法只有當用戶手動單擊按鈕或超鏈接時才會調用；如果嘗試在瀏覽器初始載入時開啟一個彈出窗口時，通常會被屏蔽;

彈出窗口屏蔽程序：

大多數瀏覽器都內置有彈出窗口屏蔽程序，如果沒有內置，可以安裝第三方實用工具；內置屏蔽會使window.open可能返回null，第三方會返回錯誤；通過需要檢測其返回值；

// 內置的屏蔽程序
var newWin = window.open("https://www.zeronetwork.cn/","_blank");
if(newWin == null){
    alert("彈窗被阻止！");
}
 
// 第三方
var blocked = false;
try{
    var newWin = window.open("https://www.zeronetwork.cn/","_blank");
    if(newWin == null)
        blocked = true;
}catch(e){
    blocked = true;
}
if(blocked){
    alert("彈窗被屏蔽");
}

彈出窗口通信：

主窗口向新窗口傳值，直接為新窗口window對象添加成員，如：

// 主窗口
var newWin = window.open("select.html","_blank");
var person = {
    name:"wangwei",
    sex: true,
    age: 18
}
newWin.person = person;
 
// 新窗口
document.write("姓名：",person.name);
document.write("性別：",person.sex);
document.write("年齡：",person.age);

新窗口向主窗口傳值，通過window.opener獲取原始窗口的屬性或者html元素；

<!-- 主窗口 -->
<div id="mydiv"></div>
<script>
var newWin = window.open("select.html","_blank");
function showDiv(str){
    var mydiv = document.getElementById("mydiv");
    mydiv.innerHTML = str;
}
</script>
 
<script>
// 新窗口
var str = "零點網絡";
window.opener.showDiv(str);
window.close();
</script>

通過普通的get傳值；

// 主窗口
function putId(id){
    window.open("select.html?id=" + encodeURIComponent(id),"putWin");
}
putId("1002");
 
// 新窗口
var id = location.search;
id = id.split("=");
console.log(id[1]);
document.write(decodeURIComponent(id[1]));

框架窗口：

如果頁面使用了框架集合(包含frameset和iframe)，則每個框架都由它自己的window對象表示，并存放在frames集合中;

與相互獨立的標簽頁或窗口不同，框架窗口之間并不是相互獨立的；

每個window對象都有一個name屬性，其中包含框架的名稱；

<frameset rows="100,*">
    <frame src="top.html" name="topFrame" />
    <frameset cols="50%,50%">
        <frame src="left.html" name="leftFrame" />
        <frame src="right.html" name="rightFrame" />
    </frameset>
</frameset>

在frames集合中,可用數字(下標從0開始,從左到右,從上到下)訪問;即可以使用frames[0]表示第1個子窗口、frames[1]表示第2個子窗口；

可使用名稱對框架進行訪問，該名稱就是該框架的name屬性，如 window.frames[“topFrame”]引用;

也可以window.topFrame 使用架框的名字訪問；

window.onload = function(){
    console.log(frames);
var topFrame = frames[0];
    console.log(topFrame);
    console.log(topFrame.name);
    var leftFrame = window.frames["leftFrame"];
    console.log(leftFrame.name);
    console.log(window.rightFrame.name);
}

可使用frames.length 取得框架集合長度;

如果是內聯框架，那就更簡單了，如：

<iframe src="right.html" name="myFrame" width="200" height="200"></iframe>
<script>
    console.log(frames);
    console.log(frames[0].name);
</script>

對于頂級窗口的window對象來說，可以看作為由若干個子窗口組成的窗口數組，也就是說可以把window對象當作為窗口的集合，如：

    console.log(window.length);
    console.log(window[0]);

但在實際場景中，最好還是使用frames來代替window，因為frames顯得更清晰些；

對于<iframe>元素，如果設置了id，也可以通過document.getElementById()方法獲取，如：

var myframe = document.getElementById("myframe");
console.log(myframe);
myframe.src = "one.html";

<iframe>元素有contentWindow屬性，引用該窗體的window對象，所以此窗體的window對象就是：

var mywin = document.getElementById("myframe").contentWindow;
console.log(mywin);
mywin.document.write("是內聯框架window對象");

可以進行反向操作，通過window對象的frameElement屬性，來獲取該窗體的<iframe>元素；表示頂級窗口的window對象的frameElement屬性為null，窗體中的window對象的frameElement屬性不是null；

var myframe = document.getElementById("myframe");
var mywin = myframe.contentWindow;
console.log(mywin.frameElement);
console.log(mywin.frameElement === myframe);
console.log(window.frameElement);
 
// 在one.html會返回<iframe id="myframe" src="one.html"></iframe>
console.log(window.frameElement);

盡管可以通過document.getElementById()和contentWindow屬性來獲取窗口中的子窗體的引用，但在實際場景中，用的還是比較少，主要還是使用frames屬性來訪問；

top對象：

可以使用top引用最頂層（外層）框架，就是瀏覽器窗口；使用它可以確保在一個框架中正確的訪問另一個框架；

// 框架集頁面
window.onload = function(){
    console.log(frames);
    console.log(top);
console.log(top === frames);  // true
console.log(top === window);  // true
    console.log(frames === window);  // true
}
// 框架頁面
console.log("topFrame:",frames);
console.log("topFrame:",top);
console.log("topFrame:",top === frames);  // false

因此，使用top訪問框架時，也可以如下：

    console.log(top[0].name);
    console.log(top["topFrame"].name);
    console.log(top.topFrame.name);
 
    console.log(top.frames[0].name);
    console.log(top.frames["topFrame"].name);
console.log(top.frames === frames);  // true

parent對象：

與top相對的另一個window對象是parent，其指的當前框架的直接上層框架，即父框架；

parent在不同的位置指不同的對象；在某些情況下，parent有可能等于top，但在沒有框架的情況下，parent一定等于top（此時，它們都等于window），如：

<!-- frameset.html -->
<frameset rows="100,*">
    <frame src="top.html" name="topFrame" />
    <frameset cols="50%,50%">
        <frame src="left.html" name="leftFrame" />
        <frame src="right.html" name="rightFrame" />
    </frameset>
</frameset>
<!-- right.html -->
<frameset cols="50%,50%">
    <frame src="one.html" name="oneFrame" />
    <frame src="two.html" name="twoFrame" />
</frameset>

// one.html中的代碼
var parentFrame = window.parent;
console.log("從one.html中訪問：",parentFrame.name);  // rightFrame
parentFrame.frames[1].document.write("<h2>框架訪問</h2>");
 
// top.html中的代碼
var parentFrame = window.parent;
console.log("top:", parentFrame.name);
console.log("top:", parentFrame.length);
console.log("top:", parentFrame.frames.length);
console.log("top:", parentFrame === top);  // true
console.log("top:", parentFrame.frames[1].name);
parentFrame.frames[1].document.write("<h2>是left頁面嗎？</h2>");

注：除非最頂層的窗口是通過window.open()打開的，否則其window對象的name屬性不會包含任何值；

self對象：

指向當前window自身，即self和window可以互換使用；

引入self的目的只是為了與top和parent對象對應起來；

對于頂級窗口，parent == self; // true

注：所有的這些對象都是window對象的屬性，可以通過window.parent、window.top等形式訪問；同時，這也意味著可以將不同層次的window對象連接起來，如：window.parent.parent.frames[0]；

窗口交互：

對于一個復雜的框架，窗口之間可以相互訪問，它主要包括對框架自身的引用、父窗口對子窗口的引用、子窗口對父窗口及其他窗口的引用、對頂級窗口的引用；

在使用框架的情況下，瀏覽器中會存在多個Global對象，即每個窗口都會有自己的執行上下文，在每個框架中定義的全局變量會自動成為框架中window對象的屬性；

<!-- right.html -->
<div id="myDiv"></div>
<div id="imgDiv"></div>
<script>
function showImg(){
    var imgDiv = document.getElementById("imgDiv");
    var img = document.createElement("img");
    img.src = "images/1.jpg";
    imgDiv.appendChild(img);
}
</script>
 
// 框架集頁面
window.onload = showDiv;
function showDiv(){
    var rightFrame = parent[2];
    var myDiv = rightFrame.document.getElementById("myDiv");
    myDiv.innerHTML = "<h2>零點網絡</h2>";
}
 
<!-- top.html -->
<h2>Top頁面</h2>
<div><button id="showBtn">顯示圖片</button>
    <button id="closeBtn">關閉圖片</button></div>
<script>
window.onload = function(){
    var showBtn = document.getElementById("showBtn");
    var closeBtn = document.getElementById("closeBtn");
    var rightFrame = top[2];
    showBtn.onclick = rightFrame.showImg;
    closeBtn.onclick = closeImg;
}
function closeImg(){
    var rightFrame = top.rightFrame;
    var imgDiv = rightFrame.document.getElementById("imgDiv");
    imgDiv.innerHTML = "";
}
</script>

對于構造函數，它也是函數，所以當用構造函數和相關的原型對象定義一個自定義類時，這個類只在一個單獨的窗口中定義；子窗口也可以引用這個類；

對于內置類來說，和自定義類就有所不同了；內置的類都會在所有的窗口中自動預定義，即每個窗口的window對象都包含原生類型的構造函數，因此每個框架一套自己的構造函數，這些構造函數一一對應，但并不相等；如：top.Object并不等于top.frames[0].Object，這個問題會影響到對跨框架傳遞的對象使用instanceof操作符；

WindowProxy對象：

window對象是客戶端Javascript的全局變量；但是從技術上來看，并不是這樣的；Web瀏覽器每次向窗口或窗體中載入新的內容，它都會開始一個新的JavaScript執行上下文，包含一個新創建的全局對象；但是當多個窗口或窗體在使用時，有一個重要的概念，盡管窗體或窗口載入了新的文檔，但是引用窗體或窗口的window對象還仍然是一個有效的引用；

所以客戶端Javascript有兩個重要的對象；客戶端全局對象處于作用域鏈的頂級，并且是全局變量和函數所定義的地方；事實上，全局對象會在窗口或窗體載入新內容時被替換；

而我們稱之為“window對象”的對象實際上不是全局對象，而是全局對象的一個代理；每次查詢或設置window對象的屬性時，就會在窗口或窗體的當前全局對象上查詢或設置相同的屬性；

HTML5規范稱這個代理對象為WindowProxy；由于它的代理行為，除了有更長的生命周期之外，代理對象表現得像真正的全局對象；如果可以比較兩個對象，那么區分它們會很困難；但是事實上，沒有辦法可以引用到真正的客戶端全局對象；全局對象處于作用域鏈的頂端，但是window、self、top、parent以及窗體的屬性全部返回代理對象；window.open()也返回代理對象；甚至頂級函數里this的值也是代理對象，而不是真正的全局對象；