整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

推荐50个超实用的 Chrome 扩展，建议收藏

家好，我是 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

可以使用此扩展程序快速清除缓存，无需任何确认对话框、弹出窗口等。可以在选项页面上自定义要清除的数据和数量，包括：应用程序缓存、缓存、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

此插件允许直接从浏览器发送跨域请求，而不会收到跨域错误。可以使用此插件覆盖 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()；

安全限制：

大多数浏览器针对弹出窗口实施了多方面的安全限制，如：不允许在屏幕之外创建弹出窗口，不允许将弹出窗口移动到屏幕之外，不允许关闭状态栏等；不允许关闭地址栏，默认情况下不允许移动弹出窗口或调整其大小；或者部分浏览器不支持修改状态栏，始终显示地址栏等；

通常，对于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的值也是代理对象，而不是真正的全局对象；


Web前端开发之Javascript-零点程序员-王唯

页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth (包括边线的宽)

网页可见区域高：document.body.offsetHeight (包括边线的宽)

网页正文全文宽：document.body.scrollWidth

网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body.scrollTop

网页被卷去的左：document.body.scrollLeft

网页正文部分上：window.screenTop

网页正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availHeight

屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技术要点

本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要 深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>请调整浏览器窗口</title>

<meta http-equiv="content-type" content="text/html; charset=gb2312">

</head>

<body>

<h2 align="center">请调整浏览器窗口大小</h2><hr>

<form action="#" method="get" name="form1" id="form1">

<!--显示浏览器窗口的实际尺寸-->

浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>

浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>

</form>

<script type="text/javascript">

<!--

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函数：获取尺寸

{

//获取窗口宽度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

//获取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通过深入Document内部对body进行检测，获取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//结果输出至两个文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//调用函数，获取数值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。


在线咨询
上一篇：33款可用来抓数据的开源爬虫软件工具（推荐收藏）
下一篇：SublimeText(代码编辑器)(文本编辑器for Mac/Windows中文版)

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 延平区 南沙群岛 内乡县 巴彦县 昌都县 唐山 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服