这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战
前言
前文学习了关于浏览器中的 JS 之JavaScript操作CSS, 本文继续来学习浏览器中的 JS - Window上的方法特性
其实好多让我们方便省心使用的库/框架底层都是 JS 基础的封装, 比如各种路由的封装.通过前几篇文章我们学习记录了浏览器中的 JavaScript, 更多更文-各知识点小结-list:
浏览器中的JS-Window & Document 特性
浏览器中 Window对象 和 Document对象上定义了各种方法, 本文来学习Window一些常见的有用的方法特性
Window
window 对象表示一个包含DOM文档的窗口，其 document 属性指向窗口中载入的 DOM文档 。使用 document.defaultView 属性可以获取指定文档所在窗口。
window作为全局变量，代表了脚本正在运行的窗口，暴露给 Javascript 代码 --MDN
1. Window对象-简单的交互模态对话框
我们比较熟悉的, 也是最开始接触 JavaScript的时候, Window对象上定义的那三个简单的浏览器页面上的与用户交互的对话框: alert()/ confirm()/ prompt(), 用于向用户展示简单的模态对话框. 这些方法都须要用户操作(比方说点击按钮确定/输入等操作).
confirm()方法同步返回一个布尔值, prompt()方法同步返回一个用户输入的字符串. 在实际项目生产中用到的比较少,(不适合线上), 可以在一些简单的项目和原型开发时使用.
2. Window对象-navigator 和 screen 属性
使用 Window.navigator 方法 可以用来检测浏览器并返回浏览器名称字符串
只读属性 Window.navigator 会返回一个 Navigator 对象的引用，可以用于请求运行当前代码的应用程序的相关信息。
// mdn
let sBrowser, sUsrAg = navigator.userAgent;
if (sUsrAg.indexOf("Firefox") > -1) {
sBrowser = "Mozilla Firefox";
// "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
sBrowser = "Opera";
} else if (sUsrAg.indexOf("Trident") > -1) {
sBrowser = "Microsoft Internet Explorer";
} else if (sUsrAg.indexOf("Edge") > -1) {
sBrowser = "Microsoft Edge";
} else if (sUsrAg.indexOf("Chrome") > -1) {
sBrowser = "Google Chrome or Chromium";
} else if (sUsrAg.indexOf("Safari") > -1) {
sBrowser = "Apple Safari";
} else {
sBrowser = "unknown";
}
alert("当前浏览器为: " + sBrowser);
3. Window对象-requestAnimationFrame()方法
window 对象的 requestAnimationFrame() 方法以一个函数作为参数, 并会在浏览器准备渲染下一帧时执行该函数.
使用: 在涉及视觉变化的功能(比如重复性的变化动画), 在代码中调用requestAnimationFrame() 可以保证这些变化让浏览器按照最优的方式平滑渲染.
相关更文阅读
- JavaScript 学习理解-Number-这是一个函数
- JS 学习理解-自动类型转换
- JavaScript 中的中缀运算符
- 你知道 JavaScript 的 typeof 是什么吗?
- 学习 JavaScript 中几个代表性事件(Event)
- 学习理解客户端 JavaScript-事件分类(一)
- 理解浏览器中的 JavaScript-事件注册
- 浏览器中的 JavaScript-fetch()网络请求方法
- HTTP 响应代码
- 浏览器中的 JS-WebSocket 通信(一)
- 学习浏览器中的 JS-WebSocket 发送接收消息(二)
- 学习浏览器中的 JS-存储的分类(一)
- 浏览器中的 JS-history
- JS-history-hashchange
- JS-history-pushState()
Calm Down & Carry On!
Buy Less by Know More!
学习, 记录, 积累 是一个漫长的痛苦过程! 也就是这个不断经历痛苦的锤炼, 让我们更加强大! 加油!
