JS 窗口主机 - Javascript

简介

JS 窗口主机是一个基于 Javascript 编写的轻量级窗口管理器，它使得开发者可以快速创建、操作和关闭多个窗口。JS 窗口主机具有以下特点：

• 支持自定义窗口样式和布局；
• 具有可移动、可调整大小、最小化、最大化和关闭等常见窗口操作；
• 支持窗口间切换和拖拽更新；
• 支持在窗口中嵌入其他 Web 组件。

使用

引入 JS 窗口主机

JS 窗口主机可以通过 CDN 引入，也可以下载源代码并自行部署。

<script src="https://cdn.jsdelivr.net/npm/js-host/dist/js-host.min.js"></script>

创建窗口

创建一个窗口只需要一行代码：

const window = new JSWindow();

这将创建一个使用默认配置和样式的窗口。您也可以传递自定义配置：

const window = new JSWindow({
  title: 'My Window',
  width: 800,
  height: 600,
  x: 100,
  y: 100,
  content: '<h1>Hello World!</h1>'
});

窗口操作

JS 窗口主机提供了多种操作窗口的方法：

• window.show()：显示窗口；
• window.hide()：隐藏窗口；
• window.minimize()：最小化窗口；
• window.maximize()：最大化窗口；
• window.restore()：还原窗口到之前的大小和位置；
• window.close()：关闭窗口。

窗口事件

JS 窗口主机中的窗口会触发多个事件，以便您对其进行响应。以下是一些常见事件：

• init：在窗口被创建时触发；
• show：在窗口被显示时触发；
• hide：在窗口被隐藏时触发；
• minimize：在窗口被最小化时触发；
• maximize：在窗口被最大化时触发；
• close：在窗口被关闭时触发。

以下是监听 show 事件的代码示例：

const window = new JSWindow();
window.on('show', () => {
  console.log('Window showed');
});

自定义窗口样式和布局

JS 窗口主机提供了多种 API 和 CSS 类，以便开发者自定义窗口样式和布局。例如，以下 CSS 类可用于控制窗口的标题栏：

.js-window-title {
  background-color: #333;
  color: #fff;
  font-size: 16px;
}

您还可以使用 JSWindow.prototype.setStyle(style) 来直接设置窗口的样式。例如，以下代码将设置窗口标题栏的样式：

const window = new JSWindow();
window.setStyle({
  titleContainer: {
    backgroundColor: '#333',
    color: '#fff',
    fontSize: '16px'
  }
});

窗口间通信

JS 窗口主机支持窗口间通信，以便不同窗口之间传递数据和事件。以下是一些常见的通信方法：

• sendMessage(message)：向其他窗口发送消息；
• onMessage(handler)：监听接收到的消息；
• emit(eventName, data)：向其他窗口广播事件；
• on(eventName, handler)：监听其他窗口广播的事件。

以下是向其他窗口发送消息并接收响应的代码示例：

// 发送消息
const window1 = new JSWindow();
const window2 = new JSWindow();
window1.sendMessage('Hello World!').then(response => {
  console.log(response); // 'Hello World! Received'
});

// 接收消息
window2.onMessage(message => {
  return message + ' Received';
});

总结

JS 窗口主机是一个非常实用的窗口管理器，可以快速创建和操作多个窗口。它具有自定义样式和布局、窗口间通信等强大特性，非常适合 Web 应用程序的开发。