FastAdmin 的 table 列表中，实现右键单击表格的事件处理

2023-12-27 12:44:11
//右键复制功能
            $(document).ready(function (){
                // 获取表格元素
                var table = document.getElementById('table');
                // 监听右键点击事件
                table.addEventListener('contextmenu', function(event) {
                    // 阻止默认的右键菜单
                    event.preventDefault();
                    // 获取右键点击的单元格
                    var cell = event.target.closest('td');
                    // 如果有选中的单元格
                    if (cell) {
                        // 获取单元格的数值
                        var cellValue = cell.innerText;
                        // 将数值复制到剪贴板
                        navigator.clipboard.writeText(cellValue)
                            .then(function() {
                                Backend.api.toastr.success(cellValue + '--已成功复制到剪贴板')
                                console.log('数值已成功复制到剪贴板：' + cellValue);
                            })
                            .catch(function(err) {
                                Backend.api.toastr.error('复制失败')
                                console.error('复制失败：', err);
                            });
                    }
                });
            });

问题

利用?navigator.clipboard.writeText()?复制一段文本

<!DOCTYPE html>
<html lang="en">
  <body>
    <button>Copy</button>
    <script>
      const btn = document.querySelector('button')
      btn.addEventListener('click', copy)

      function copy() {
        navigator.clipboard.writeText(new Date())
      }
    </script>
  </body>
</html>

当我们启用一个本地服务，发现点击复制是不成功的，报错如下：

TypeError: can't access property "writeText", navigator.clipboard is undefined
TypeError: Cannot read properties of undefined (reading 'writeText')

由于?

与许多新 API 一样，Clipboard API 仅支持通过 HTTPS 提供的页面。为帮助防止滥用，仅当页面是活动选项卡时才允许访问剪贴板。活动选项卡中的页面无需请求许可即可写入剪贴板，但从剪贴板读取始终需要许可。

Clipboard API?的复制与粘贴能力对应?Permissions API?的?clipboard-write?和?clipboard-read?权限。

通过以下示例，我们可以发现：

const queryOpts = { name: 'clipboard-write', allowWithoutGesture: false }
const permissionStatus = await navigator.permissions.query(queryOpts)
console.log(permissionStatus.state) // Will be 'granted', 'denied' or 'prompt'

permissionStatus.state 返回结果是 denied，也就是该权限被设为「拒绝」状态，自然就无法实现复制的目的了。

其实是浏览器的一种安全策略，当页面不安全的时候，全局属性 navigator.clipboard 是不存在的，也就是 undefined，所以就出现前面的问题了

?解决方法

在域名安全的情况下，比如 HTTPS、localhost、127.0.0.1，是可以访问到 navigator.clipboard 对象的。
由于生产环境上几乎都是 HTTPS 了，所以主要面向本地调试的场景，我们可以把类似 http://172.10.3.24:3000 改成 http://localhost:3000 来解决复制问题

更多

其实 window 对象上有一个属性?isSecureContext?可用于判断当前域名是否安全

if (window.isSecureContext) {
  // 页面在安全上下文中，所以 Clipboard API 可用
  // do something...
}

许多 Web API 仅能在安全上下文（Secure contexts）中访问

本地传递的资源，如那些带有 http://127.0.0.1、http://localhost 和 http://*.localhost 网址（如 http://dev.whatever.localhost/）和 file:// 网址的资源也是认为经过安全传递的。

非本地资源要被认为是安全的，必须满足以下标准：

  • 必须通过 https:// 或 wss:// URL 提供服务
  • 用于传送资源的网络信道的安全属性不能是废弃的

文章来源:https://blog.csdn.net/weixin_53901860/article/details/135214907
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。