js实现窗口
窗口创建与操作
使用JavaScript创建或操作窗口可以通过window.open()方法实现。该方法允许在新窗口或标签页中加载指定URL，并可控制窗口的大小、位置等属性。
语法示例：
const newWindow = window.open(
'https://example.com', // URL
'_blank', // 目标（_blank表示新窗口）
'width=500,height=300' // 窗口参数
); 常用参数说明：
width/height：窗口尺寸（像素）。left/top：窗口屏幕坐标（像素）。menubar/toolbar：控制是否显示菜单栏或工具栏（值为yes/no）。
关闭窗口：
newWindow.close(); // 关闭已打开的窗口 窗口间通信
通过window.postMessage()实现跨窗口安全通信，需配合message事件监听。
发送消息示例：
// 父窗口向子窗口发送消息
newWindow.postMessage('Hello from parent!', 'https://example.com'); 接收消息示例：
// 子窗口监听消息
window.addEventListener('message', (event) => {
if (event.origin === 'https://parent-site.com') {
console.log('Received:', event.data);
}
}); 注意事项：
- 始终验证
event.origin以确保消息来源可信。 - 跨域通信需双方窗口协同处理。
窗口位置与大小控制
通过window对象的属性和方法调整窗口状态：
获取窗口尺寸：
const width = window.innerWidth; // 视口宽度
const height = window.innerHeight; // 视口高度 调整窗口位置：
window.moveTo(100, 100); // 移动到屏幕坐标(100,100)
window.resizeTo(800, 600); // 调整窗口大小为800x600 全屏控制：
document.documentElement.requestFullscreen(); // 进入全屏
document.exitFullscreen(); // 退出全屏 弹窗拦截处理
现代浏览器可能拦截window.open()，需确保调用由用户触发（如点击事件）。
用户触发示例：
<button onclick="openPopup()">Open Window</button>
<script>
function openPopup() {
window.open('https://example.com', '_blank');
}
</script> 检测是否被拦截：
const popup = window.open();
if (!popup || popup.closed) {
console.log('Popup blocked!');
} 窗口生命周期事件
监听窗口关闭或刷新：
beforeunload事件：
window.addEventListener('beforeunload', (event) => {
event.preventDefault();
event.returnValue = ''; // 显示确认对话框
}); unload事件：
window.addEventListener('unload', () => {
// 清理资源（注意：部分API可能不可用）
}); 以上方法覆盖了窗口创建、通信、控制及事件处理的核心场景，适用于大多数浏览器环境。实际使用时需注意浏览器兼容性和安全策略限制。
