JavaScript 可以通过浏览器提供的 API 操作浏览器窗口和进行通信。
可以使用 window 对象来操作当前浏览器窗口,在 JavaScript 中,window 对象是全局对象,可以直接访问。
// 打开一个新窗口
window.open('https://www.baidu.com')
// 关闭当前窗口
window.close()
// 改变窗口大小
window.resizeTo(500, 500)
// 移动窗口
window.moveTo(100, 100)
可以使用 window 对象获取当前窗口的一些信息,例如窗口大小、位置、URL 等。
// 获取窗口大小
const width = window.innerWidth
const height = window.innerHeight
// 获取窗口位置
const x = window.screenX
const y = window.screenY
// 获取当前页面 URL
const url = window.location.href
JavaScript 可以在不同的窗口或页面之间进行通信,常用的通信方式有两种:消息传递和共享存储。
在不同窗口之间传递消息可以使用 postMessage() 方法,该方法可以将消息发送到指定窗口,并在该窗口的 onmessage 事件中接收消息。
// 发送消息
window.postMessage('Hello World!', 'http://example.com')
// 接收消息
window.addEventListener('message', event => {
console.log(event.data)
})
共享存储可以使用 localStorage 或 sessionStorage 对象,在同一域名下的不同窗口之间共享数据。
// 存储数据
localStorage.setItem('username', 'John')
// 获取数据
const username = localStorage.getItem('username')
console.log(username) // John
// 移除数据
localStorage.removeItem('username')
需要注意的是,localStorage 存储的数据是永久性的,而 sessionStorage 存储的数据只在当前会话中有效。