GGbond : Js你不知道的那些冷门事件

持续补充...

欢迎留言提出那些不常用的api

文字转语音

// 使用Web Speech API将文字转为语音
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance('{待转换的文字}');
synth.speak(utterance);

使用场景：在网站或应用程序中将文字转换为语音。

浏览器全屏

// 进入全屏模式
const element = document.documentElement;
element.requestFullscreen();

使用场景：在网站或应用程序中实现全屏模式。

屏幕录制

// 使用MediaRecorder API进行屏幕录制
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const recorder = new MediaRecorder(stream);
recorder.start();

// 当录制结束时触发
recorder.addEventListener('dataavailable', ({ data }) => {
  const url = URL.createObjectURL(data);
  const a = document.createElement('a');
  a.href = url;
  a.download = '{文件名}';
  document.body.appendChild(a);
  a.click();
  URL.revokeObjectURL(url);
});

使用场景：在网站或应用程序中实现屏幕录制功能。

拖放上传文件

// 使用Drag and Drop API进行拖放上传文件
const dropzone = document.getElementById('{拖放区域id}');
dropzone.addEventListener('dragover', (event) => {
  event.preventDefault();
  dropzone.classList.add('dragover');
});
dropzone.addEventListener('dragleave', () => {
  dropzone.classList.remove('dragover');
});
dropzone.addEventListener('drop', (event) => {
  event.preventDefault();
  dropzone.classList.remove('dragover');
  const files = event.dataTransfer.files;
  // 处理上传的文件
});

使用场景：在网站或应用程序中实现拖放上传文件功能。

右键菜单

// 使用Context Menu API创建自定义右键菜单
const menu = new Menu();
menu.append(new MenuItem({ label: '{菜单项1}', click: () => { /* 处理菜单项1 */ } }));
menu.append(new MenuItem({ label: '{菜单项2}', click: () => { /* 处理菜单项2 */ } }));
window.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  menu.popup({ window: remote.getCurrentWindow() });
});

使用场景：在网站或应用程序中创建自定义右键菜单。

模拟鼠标事件

// 使用MouseEvent API模拟鼠标事件
const element = document.getElementById('{目标元素id}');
const event = new MouseEvent('click', {
  view: window,
  bubbles: true,
  cancelable: true
});
element.dispatchEvent(event);

使用场景：在网站或应用程序中模拟鼠标事件。

模拟键盘事件

// 使用KeyboardEvent API模拟键盘事件
const element = document.getElementById('{目标元素id}');
const event = new KeyboardEvent('keydown', {
  key: '{按键名称}',
  code: '{按键码}',
  keyCode: {按键码},
  which: {按键码},
  altKey: true,
  ctrlKey: true,
  shiftKey: true
});
element.dispatchEvent(event);

使用场景：在网站或应用程序中模拟键盘事件。

选择文件夹

// 使用DirectoryPicker API选择文件夹
const directoryHandle = await window.showDirectoryPicker();
const fileHandle = await directoryHandle.getFileHandle('{文件名}');
const file = await fileHandle.getFile();

使用场景：在网站或应用程序中选择文件夹并获取文件。

二维码生成

// 使用QRCode API生成二维码
new QRCode(document.getElementById('{目标Canvas元素id}'), {
  text: '{二维码内容}',
  width: {宽度},
  height: {高度}
});

使用场景：在网站或应用程序中生成二维码。

图片合并

// 使用HTMLCanvasElement.getContext('2d').drawImage() API进行图片合并
const canvas = document.createElement('canvas');
canvas.width = {合并后宽度};
canvas.height = {合并后高度};
const ctx = canvas.getContext('2d');
ctx.drawImage(document.getElementById('{图片元素1id}'), {图片1左边距}, {图片1上边距});
ctx.drawImage(document.getElementById('{图片元素2id}'), {图片2左边距}, {图片2上边距});

使用场景：在网站或应用程序中进行图片合并。

访问设备的电池状态

Battery Status API允许访问设备的电池状态。它可用于优化电源消耗或显示电池指示器。

navigator.getBattery()
  .then((battery) => {
    console.log('电池电量:', battery.level);
    console.log('电池充电:', battery.charging);
    console.log('电池剩余时间:', battery.dischargingTime);
    battery.addEventListener('levelchange', () => {
      console.log('电池电量已更改:', battery.level);
    });
  })
  .catch((error) => {
    console.error('无法访问电池状态:', error);
  });

使用场景：在网站或应用程序中访问设备的电池状态。

访问设备的位置

Geolocation允许访问设备的位置。

navigator.geolocation.getCurrentPosition((position) => {
  console.log('纬度:', position.coords.latitude);
  console.log('经度:', position.coords.longitude);
  console.log('精度:', position.coords.accuracy);
}, (error) => {
  console.error('无法访问地理位置:', error);
});

使用场景：在网站中获取浏览器定位

访问蓝牙设备

navigator.bluetooth.requestDevice({
  filters: [{ services: ['heart_rate'] }]
})
.then((device) => {
  console.log('找到蓝牙设备:', device.name);
  return device.gatt.connect();
})
.then((server) => {
  return server.getPrimaryService('heart_rate');
})
.then((service) => {
  return service.getCharacteristic('heart_rate_measurement');
})
.then((characteristic) => {
  characteristic.addEventListener('characteristicvaluechanged', (event) => {
    console.log('心率:', event.target.value.getUint8(1));
  });
  return characteristic.startNotifications();
})
.catch((error) => {
  console.error('无法访问蓝牙设备:', error);
});

使用场景：不知道没用过 , 手机端访问蓝牙设备吧。

打开NFC设备

NDEFReader.onreading允许访问NFC设备

const reader = new NDEFReader();
reader.onreading = (event) => {
  console.log('接收到NFC消息:', event.message.records.map(record => record.data));
};
reader.start();

使用场景：NFC设备扫码。

访问USB设备

navigator.usb.requestDevice允许访问USB设备，例如打印机或扫描仪。

navigator.usb.requestDevice({ filters: [{ vendorId: 0x1234 }] })
  .then((device) => {
    console.log('找到USB设备:', device.productName);
    return device.open();
  })
  .then((session) => {
    return session.claimInterface(0);
  })
  .then((interface) => {
    return interface.controlTransferOut({
      requestType: 'class',
      recipient: 'interface',
      request: 0x01,
      value: 0x0000,
      index: 0x0000
    });
  })
  .then(() => {
    console.log('USB命令成功发送');
  })
  .catch((error) => {
    console.error('无法访问USB设备:', error);
  });

使用场景：没使用过。

网页分享api

if (navigator.share) {
  navigator.share({
    title: '我的酷网站',
    text: '看看我发现的这个酷网站！',
    url: '<https://example.com>'
  })
  .then(() => {
    console.log('内容已成功分享');
  })
  .catch((error) => {
    console.error('无法分享内容:', error);
  });
} else {
  console.warn('Web Share API不受支持');
}

使用场景: 将内容分享到社交媒体或其他应用程序

记住网站密码

navigator.credentials.get({ password: true })
  .then((credential) => {
    console.log('用户名:', credential.id);
    console.log('密码:', credential.password);
  })
  .catch((error) => {
    console.error('无法检索凭据:', error);
  });

使用场景: 此API允许管理用户凭据,可做登录保存