其他

有用过剪切板么，简要讲解下

答案

方法/接口	主要特性	典型用法/代码示例	兼容性/限制
document.execCommand('copy')	同步，需选中内容	`document.execCommand('copy')`	需用户交互，部分浏览器已限制
navigator.clipboard API	异步，安全性高	`navigator.clipboard.writeText('内容')`	需HTTPS，部分浏览器需授权

补充说明

execCommand('copy') 适合兼容性要求高的场景，但逐步被淘汰，需选中内容或操作可编辑元素。
navigator.clipboard 推荐用于现代浏览器，支持异步复制，安全性更高，适合用户主动操作（如按钮点击）。
剪切板操作通常需用户交互触发，防止恶意脚本窃取或篡改剪切板内容。

// 现代推荐写法
async function copyToClipboard (text) {
  try {
    await navigator.clipboard.writeText(text)
    console.log('复制成功')
  } catch (e) {
    console.error('复制失败', e)
  }
}

提示

优先使用 navigator.clipboard，如需兼容老浏览器可降级为 execCommand('copy')。

延伸阅读

如何判断页签是否为活跃状态

答案

判断当前浏览器页签（Tab）是否为活跃状态，常用 Page Visibility API。该 API 能检测页面是否处于用户可见状态，适用于暂停动画、停止轮询等场景。

Page Visibility API 通过 document.visibilityState 属性和 visibilitychange 事件，判断页面是“可见”还是“隐藏”。常见状态有 visible（活跃/可见）、hidden（非活跃/不可见）。当用户切换标签页、最小化窗口或切换应用时，状态会自动变化。

属性/事件	作用	常见值/说明
document.visibilityState	页面可见性	visible/hidden
visibilitychange	可见性变化事件	监听页面状态切换

// 判断当前页签是否活跃
function isTabActive () {
  return document.visibilityState === 'visible'
}

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
  if (isTabActive()) {
    console.log('页面处于活跃状态')
  } else {
    console.log('页面已隐藏')
  }
})

延伸阅读

MDN: Page Visibility API - 官方文档与用法说明
前端性能优化：合理利用 Page Visibility - 实战与应用场景

drag

HTML5 Drag API 提供了一组用于实现拖放操作的接口和事件。以下是 HTML5 Drag API 中常用的一些接口和事件：

draggable 属性：将元素设置为可拖动。可以通过设置元素的 draggable 属性为 true 或 false 来控制元素是否可以被拖动。
ondragstart 事件：拖动操作开始时触发的事件，通常在此事件中设置被拖动的数据类型和数据内容。
ondrag 事件：拖动过程中持续触发的事件，可以在此事件中进行一些自定义的操作，如实时更新拖动元素的位置。
ondragend 事件：拖动操作结束时触发的事件，通常在此事件中执行一些清理操作，如移除拖动时设置的样式。
ondragenter 事件：拖动元素进入目标元素时触发的事件，可以在此事件中进行一些针对目标元素的操作，如改变目标元素的样式。
ondragleave 事件：拖动元素离开目标元素时触发的事件，可以在此事件中进行一些清除或还原目标元素的操作。
ondragover 事件：在目标元素上拖动时持续触发的事件，可以在此事件中阻止默认的拖放行为或执行一些自定义操作。
ondrop 事件：在目标元素上释放拖动元素时触发的事件，通常在此事件中处理拖放操作，如获取拖放数据并执行相应的操作。

以上是 HTML5 Drag API 中常用的接口和事件。通过使用这些接口和事件，可以实现灵活的拖拽功能并与其他元素进行交互。需要注意的是，拖放操作的实现还涉及到一些其他的 DOM 操作和事件处理。

应用举例

下面是一个使用 HTML5 Drag API 的简单示例，展示了如何实现拖拽功能：

<!DOCTYPE html>
<html>
 <head>
 <style>
 .draggable {
 width: 100px;
 height: 100px;
 background-color: red;
 cursor: move;
 }

 .droppable {
 width: 200px;
 height: 200px;
 background-color: blue;
 }
 </style>
 </head>
 <body>
 <div class="draggable" draggable="true">Drag Me</div>
 <div class="droppable">Drop Here</div>

 <script>
 const draggableElement = document.querySelector('.draggable');
 const droppableElement = document.querySelector('.droppable');

 draggableElement.addEventListener('dragstart', (event) => {
 // 设置拖动数据
 event.dataTransfer.setData('text/plain', 'Draggable Element');
 });

 droppableElement.addEventListener('dragover', (event) => {
 // 阻止默认的拖放行为
 event.preventDefault();
 });

 droppableElement.addEventListener('drop', (event) => {
 // 获取拖放数据
 const data = event.dataTransfer.getData('text/plain');

 // 在目标元素上执行操作
 droppableElement.textContent = data;
 });
 </script>
 </body>
</html>

在上面的示例中，.draggable 类的元素被设置为可拖动（draggable="true"），当开始拖动时，触发了 dragstart 事件，并设置了拖动数据。

.droppable 类的元素作为目标元素，它监听了 dragover 事件以阻止默认的拖放行为，并在 drop 事件中获取拖放数据并执行相应的操作。

通过以上代码，你可以在浏览器中看到一个红色的可拖动元素和一个蓝色的目标元素。你可以尝试将可拖动元素拖放到目标元素上，拖放完成后，目标元素的内容将会被设置为拖放的数据。

drag api

有用过剪切板么，简要讲解下​

如何判断页签是否为活跃状态​

drag​

有用过剪切板么，简要讲解下

如何判断页签是否为活跃状态

drag