JavaScript 技术篇-navigator.permissions读取chrome剪切板权限获取不生效原因:只有在https协议下使用有效。手动设置chrome页面剪切板读取权限方法

简介: JavaScript 技术篇-navigator.permissions读取chrome剪切板权限获取不生效原因:只有在https协议下使用有效。手动设置chrome页面剪切板读取权限方法

获取剪切板权限,如果是在 F12 控制台执行,需要在 5 秒内点击一下网页内容,这个是只有焦点在页面里才可以用,因为只支持 https 协议,所以要焦点在页面内才能判断是否是该协议,http 地址被 chrome 认为是不安全的连接。

setTimeout(async () => { 
  // 读取剪切板内容
  const text = await navigator.clipboard.readText(); 
  console.log(text); 
}, 5000);

效果图如下:

image.png

获取权限后效果图,点击那个小锁看到已经拥有剪切板权限了:

image.png

可以用下面的方法获取剪切板权限的值。

navigator.permissions.query({
  name: 'clipboard-read'
}).then(permissionStatus => {
  // permissionStatus.state 的值是 'granted'、'denied'、'prompt':
  console.log(permissionStatus.state);
});

执行效果图:

image.png

手动设置剪切板权限方法:

image.png

image.png

喜欢的点个赞❤吧!

           

目录
相关文章
|
11天前
|
JSON 前端开发 JavaScript
在JavaScript中,异步编程是一种处理非阻塞操作(如网络请求、文件读写等)的重要技术
【6月更文挑战第12天】JavaScript中的异步编程通过Promise和async/await处理非阻塞操作。Promise管理异步操作的三种状态,防止回调地狱,支持链式调用和并行处理。async/await是ES8引入的语法糖,使异步代码更像同步代码,提高可读性。两者结合使用能更高效地处理复杂异步场景。
21 3
|
11天前
|
JavaScript 前端开发 UED
深入理解JavaScript中的节流与防抖技术
理解并合理运用节流与防抖技术,可以帮助我们优化事件处理函数的执行频率,从而提升应用的性能和用户体验。这两种技术通过减少不必要的计算和DOM操作,使得Web应用程序能够更加流畅地运行。 通过掌握防抖和节流的实现原理及应用场景,开发者可以更加灵活地编写高效且性能优化的代码,对于面对高频事件处理时尤其重要。在开发中合理选择使用防抖或节流,将直接影响到应用的响应性和效率。
13 1
|
1月前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端界面的技术探索
【5月更文挑战第20天】Vue.js是一款渐进式JavaScript框架,擅长构建交互式前端界面。其核心特性包括响应式数据绑定、组件化开发、指令系统和虚拟DOM,简化开发并提升性能。通过Vue CLI创建项目,拆分组件,结合数据绑定和事件处理实现交互,使用Vue Router管理路由,Vuex进行状态管理,能高效构建现代Web应用。
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
JavaScript 中的二进制散列值和权限设计
这篇文章介绍了JavaScript中使用位运算符进行权限控制的方法。文章首先介绍了JavaScript中的进制类型,包括十进制、二进制、十六进制和八进制。然后解释了位运算符的概念和常用的按位与、按位或、按位异或和按位非操作符。接下来讨论了位运算符在传统权限系统中的应用场景,并给出了一个基于二进制变量表示权限的示例。最后,文章提到了位运算符方案的局限性,例如每个权限码必须是唯一且只有一位为1的限制。但总的来说,在中小型业务中可以使用这种方式进行权限控制。
|
4天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
7天前
|
JavaScript 前端开发 开发者
如何跟踪最新的JavaScript游戏开发技术趋势
【6月更文挑战第16天】跟踪JavaScript游戏开发趋势:关注技术网站和博客,如Medium和GameDev.net;参加JSConf和GDC;订阅期刊;关注Phaser、Three.js等开源项目;利用Twitter和Stack Overflow交流;学习新技术如WebGL和WebAssembly。保持学习和参与,确保与时俱进。
13 6
|
5天前
|
JavaScript
JS移动端设置mouseover,mouseleave有效么
JS移动端设置mouseover,mouseleave有效么
|
14天前
|
前端开发 JavaScript API
JavaScript中的异步编程技术探究
JavaScript作为一种前端开发语言,具有强大的异步编程能力,本文将深入探讨JavaScript中的异步编程技术,包括回调函数、Promise、async/await以及最新的ES2022中的并行执行模型,帮助开发者更好地理解和应用JavaScript异步编程。
|
18天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的基于协同过滤技术的网上书城附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的基于协同过滤技术的网上书城附带文章和源代码部署视频讲解等
19 1
|
20天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的技术疫情防控自动售货机系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的技术疫情防控自动售货机系统附带文章和源代码部署视频讲解等
18 0
基于ssm+vue.js+uniapp小程序的技术疫情防控自动售货机系统附带文章和源代码部署视频讲解等