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

喜欢的点个赞❤吧!

《智能前端技术与实践》——第 2 章 前端开发基础 ——2.4 JavaScript 基础
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.4 JavaScript 基础
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.6 深度学习中的 JavaScript——2.6.2 JavaScript 异步编程(上)
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.6 深度学习中的 JavaScript——2.6.2 JavaScript 异步编程(上)
参数obj表示被复制的元素,而参数bool是一个布尔值,取值如下。 1或true:表示复制元素本身以及复制该元素下的所有子元素。 0或false:表示仅仅复制元素本身,不复制该元素下的子元素。
1.创建元素 在JavaScript中,我们可以使用createElement()来创建一个元素节点,也可以使用createTextNode()来创建一个文本节点,然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”
DOM,全称是“Document Object Model(文档对象模型)”,它是由W3C定义的一个标准。 在实际开发中,我们有时候需要实现这样的效果:鼠标移到元素上改变元素的颜色,或者动态添加新元素及删除元素等。这些效果就是通过DOM提供的方法来实现的。 简单地说,DOM里面有很多方法,我们可以通过它提供的方法来操作一个页面中的某个元素,如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。 DOM结构 DOM采用的是“树形结构”,用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。 【我的前端】面向 JavaScript 开发:前端必学的4种函数式编程技术
函数式编程技术是现代 Wed 开发中的热门话题。这一切都是关于将应用程序框架设计为简单功能的组合,一边写更多可扩展的代码。
【jQuery入门】为JavaScript而生,简化JavaScript操作的神技术
之前我们学习了这个JSON热门技术,在之后的学习中都会多多少少的牵扯到JSON相关的知识的,好多技术中也会用到JSON,所以如果你还不知道JSON建议先去看一下我的上一篇博客。
JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)-2
JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)-