javascript中浏览器自带的实用方法

1. Location URL信息

Location对象包含有关当前URL的信息，是Window对象的一个部分，可通过window.location属性来访问

hash 读写URL#后面部分

hash属性是一个可读可写的字符串，该字符串是URL的锚部分（从#号开始的部分）

语法：

// 写
location.hash = name// 读
console.log(location.hash)

host 读写URL主机和端口号

host属性是一个可读可写的字符串，可设置或返回当前URL的主机名称和端口号

语法：

// 写
location.host = name// 读
console.log(location.host)

hostname 读写URL主机名

hostname属性是一个可读可写的字符串，可设置或返回当前URL的主机名

语法：

// 写
location.hostname = name// 读
console.log(location.hostname)

href 读写URL

href属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整URL，因此可以改变页面

语法：

// 写
location.href = name// 读
console.log(location.href)

pathname 读写URL路径部分

pathname属性是一个可读可写的字符串，可设置或返回当前URL的路径部分

语法：

// 写
location.pathname = name// 读
console.log(location.pathname)

port 读写URL端口

port属性是一个可读可写的字符串，可设置或返回当前URL的端口部分

语法：

// 写
location.port = name// 读
console.log(location.port)

protocol 读写URL端口

protocol属性是一个可读可写的字符串，可设置或返回当前URL的协议

语法：

// 写
location.protocol = name// 读
console.log(location.protocol)

search 读写URL?后面

search属性是一个可读可写的字符串，可设置或返回当前URL的查询部分（问号?之后的部分）

语法：

// 写
location.search = name// 读
console.log(location.search)

assign() 加载新页面

加载新的文档

语法：

location.assign(URL)

reload() 刷新

重新加载当前文档

语法：

location.reload()

replace() 替换页面

用一个新文档取代当前文档，不会在History对象中生成一个新的记录，会覆盖

语法：

location.replace(newURL)

2. 弹出框

原生的各种弹出窗口，用户没操作之前，将暂停对JavaScript代码的执行

alert()

alert()方法用于显示带有一条指定消息和一个OK按钮的警告框

例子：

alert("警告")

confirm()

confirm()方法用于显示一个带有指定消息和OK及取消按钮的对话框，会返回true或false

例子：

let hint = confirm("是否确认？")
if (hint) {//
} else {//
}

prompt()

prompt()方法用于显示可提示用户进行输入的对话框，有确认和取消按钮，取消返回false

例子：

let hint = prompt('请输入您的账号', '可选的填充内容')
if (hint != null && hint != "") {console.log(hint)
} else {console.log(998)
}

3. 定时器

原生方法，延时去执行某一段代码

setInterval()

按照指定的周期（以毫秒计）来调用函数或计算表达式，会不停地调用，直到被清除或窗口被关闭

例子：

let timer = setInterval(() => {console.log(new Date())
}, 1000)

清除：

clearInterval(timer)

setTimeout()

在指定的毫秒数后调用函数或计算表达式，只执行一次，可通过调用自己实现多次执行

例子：

let timer = setTimeout(() => {console.log(new Date())
}, 1000)

清除：

clearTimeout(timer)

4. close() 关闭窗口

方法close()将关闭有window指定的顶层浏览器窗口。某个窗口可以通过调用self.close()或只调用 close()来关闭其自身。只有通过JavaScript代码打开的窗口才能够由JavaScript代码关闭

语法：

window.close()

5. open() 打开窗口

open()方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

语法：

window.open(URL, name, features, replace)
// URL 页面路径
// name 可选 新窗口的名称
// features 可选 窗口特性
// replace 可选 布尔值 是否替换浏览历史中的当前条目

6. scrollTo() 浏览器坐标滚动

把页面内容滚动到指定的坐标，两个参数X轴和Y轴

例子：

window.scrollTo(100, 500)
// 或者平滑滚动
window.scrollTo({left: 0,top:1000,behavior: 'smooth'
})

7. scrollBy() 浏览器像素滚动

把页面滚动指定的像素数，两个参数X轴和Y轴

例子：

window.scrollBy(100, 100)

8. resizeTo() 调整浏览器宽高

把窗口大小调整为指定的宽度和高度，两个参数宽和高

例子：

window.resizeTo(500, 300)

9. moveTo() 移动浏览器位置

把窗口的左上角移动到一个指定的坐标，两个参数X和Y

例子：

window.moveTo(500, 300)

10. History URL历史

History对象包含用户（在浏览器窗口中）访问过的URL，是window对象的一部分，可通过window.history属性对其进行访问

back()

back()方法可加载历史列表中的前一个URL（如果存在），调用该方法的效果等价于点击后退按钮或调用history.go(-1)

语法：

history.back()

go()

go()方法可加载历史列表中的某个具体的页面

语法：

history.go(number|URL)

11. Screen 屏幕信息

Screen对象包含有关客户端显示屏幕的信息

例子：

// 返回屏幕的可用高度
screen.availHeight
// 返回屏幕的可用宽度
screen.availWidth
// 返回调色板的位深度
screen.colorDepth
// 返回你的屏幕的总高度
screen.height
// 返回你的屏幕的颜色分辨率
screen.pixelDepth
// 返回你的屏幕的总宽度
screen.width

12. navigator 浏览器信息

window.navigator对象包含有关访问者浏览器的信息

例子：

// 浏览器代号
navigator.appCodeName
// 浏览器名称
navigator.appName
// 浏览器版本
navigator.appVersion
// 启用Cookies
navigator.cookieEnabled
// 硬件平台
navigator.platform
// 用户代理
navigator.userAgent
// 用户代理语言
navigator.language

---

本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

往期文章

• vue中ref的详解以及react的ref对比
• css使用aspect-ratio制作4:3和9:16和1:1等等比例布局
• Web前端页面开发阿拉伯语种适配指南
• flutter-使用extended_image操作图片的加载和状态处理以及缓存和下载
• flutter-制作可缩放底部弹出抽屉评论区效果
• flutter-实现Tabs吸顶的PageView效果
• Vue2全家桶+Element搭建的PC端在线音乐网站
• 助你上手Vue3全家桶之Vue3教程
• 超详细！vue组件通信的10种方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令

个人主页

• CSDN
• GitHub
• 掘金