js 实现窗口

使用 JavaScript 实现窗口功能

JavaScript 可以通过 window 对象或 open() 方法实现窗口的创建和管理。以下是几种常见的窗口操作方法：

打开新窗口

使用 window.open() 方法可以打开一个新窗口。该方法接受 URL、窗口名称和窗口特性作为参数。

const newWindow = window.open('https://example.com', '_blank', 'width=500,height=400');

关闭窗口

通过 window.close() 方法可以关闭当前窗口。注意：此方法只能关闭由脚本打开的窗口或当前窗口。

window.close();

调整窗口大小

使用 resizeTo() 方法可以调整窗口的尺寸。

window.resizeTo(800, 600);

移动窗口位置

通过 moveTo() 方法可以将窗口移动到屏幕的指定位置。

window.moveTo(100, 100);

窗口事件监听

可以监听窗口的事件，例如加载、卸载或调整大小。

window.addEventListener('load', () => {
  console.log('窗口加载完成');
});

window.addEventListener('resize', () => {
  console.log('窗口大小已改变');
});

模态窗口模拟

虽然 JavaScript 本身不提供模态窗口，但可以通过 HTML 和 CSS 结合实现类似效果。

const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = '0';
modal.style.left = '0';
modal.style.width = '100%';
modal.style.height = '100%';
modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
document.body.appendChild(modal);

窗口间通信

使用 postMessage 可以在不同窗口间传递数据。

// 父窗口
newWindow.postMessage('Hello from parent!', 'https://example.com');

// 子窗口
window.addEventListener('message', (event) => {
  if (event.origin === 'https://parent.com') {
    console.log(event.data);
  }
});

注意事项

• 现代浏览器可能会阻止弹出窗口，因此 window.open() 通常需要在用户交互（如点击事件）中调用。
• 跨域窗口通信需确保安全性，验证 event.origin。
• 移动设备上窗口特性可能受限，需测试兼容性。

以上方法覆盖了窗口的基本操作，可根据实际需求调整参数和逻辑。