女王控的博客

前端

144 篇文章

鼠标无限移动 JS API Pointer Lock简介

简介 Pointer Lock API 可以让你的鼠标无限移动,脱离浏览器窗体的限制! API 3 个属性 Document.pointerLockElement Document.onpointerlockchange Document.onpointerlockerror 2 个方法 Element.requestPointerLock() Document.exitPointerLock() 2 个事件 pointerlockchange pointerlockerror 其中,… »

CSS数据上报和HTML验证

纯 CSS 实现数据上报 举个例子,要跟踪并统计某个按钮的点击事件: 此时,当我们点击按钮的时候,相关行为数据就会上报给服务器,这种上报,就算把 JS 禁掉也无法阻止。 点击页面的两个按钮,可以看到发出了如下的请求: 当然,我们可以统计的不仅仅是单击行为,hover 行为,focus 行为都可以统计,当然,还有很多其他方面的。例如: 不支持 CSS3 浏览器比例统计 例如,我的 Chrome 发出的图片请求地址就是: 类似的,我们可以检测支持其他一些 CSS… »

如何disabled禁用所有表单input输入框元素

pointer-events:none 和覆盖层方法的问题 经常会遇到需求,需要禁用 div 中或者 form 元素中一堆表单控件元素,如 , , 元素。 很多人用的下面这两种方法实现: 设置 pointer-events:none,例如: 使用::before 伪元素创建一个浮层该在所有的表单元素上,例如: 以上两个方向虽然可以让点击无效,但是并没有阻止键盘访问,也就是 Tab 键索引,或者回车都能触发表单行为,使用 new FormData(form… »

解决canvas图片getImageData,toDataURL跨域问题

图片服务器需要配置 Access-Control-Allow-Origin 一般团队都会有一个专门域名放置静态资源,例如腾讯是 gtimg.com,百度是 bdimg.com;或者很多团队使用的是腾讯云或者阿里云的服务。 而主页面所在域名往往不一样,当需要需要对 canvas 图片进行 getImageData()或 toDataURL()操作的时候,跨域问题就出来了,而且跨域问题还不止一层。 首先,第一步,图片服务器需要配置 Access-Control-Allow-Origin… »

JS前端创建html或json文件并浏览器导出下载

HTML 与文件下载 如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用 HTML5 原生的 download 属性,例如: 但显然,如果纯粹利用 HTML 属性来实现文件的下载(而不是浏览器打开或浏览),对于动态内容,就无能为力。 例如,我们对页面进行分享的时候,希望分享图片是页面内容的实时截图,此时,这个图片就是动态的,纯 HTML 显然是无法满足我们的需求的,借助 JS 和其它一些 HTML5 特性,例如,将页面元素转换到 canvas… »

0%