多种方案教你实现iframe嵌套页面相互传参(父子通信)
需求描述 在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？ 开始上手 上代码 父页面 iframe页面 父向子传值 方法一：通过URL传参 父页面添加代码 iframe页面添加代码 方法二：通过window.postMessage()方法 父页面添加代码 iframe页面添加代码 注意事项 postMessage方法有三...
无法复现生产BUG？rrweb录制用户行为助你排忧解难！
背景 对于一些比较重要的项目，我们可能需要对这些项目中的某些网页进行特殊处理，比如记录的用户行为，这样做是有好处的，通过分析用户的行为从而对项目的流程进行优化；采集用户遇到的 bug 的操作路径，尤其是当我们无法复现生产环境的 BUG 时，录制用户行为对开发人员有很大的帮助，那么该如何实现录制用户行为的功能呢？ 关于录制用户行为需要注意两点： 必须要做到用户无感知才行，如果让用户决定是否录制，那其实就无法记录用户行为了，一般来说用户是会...
JavaScript 连接蓝牙&传输数据！
需求背景 最近项目上接到一个新的需求： ！ 以下是关于这个需求的 ： 支持主流浏览器 ：如 Chrome、Firefox、Safari 等以及不同操作系统（如 Windows、macOS、Linux 等）。 蓝牙连接 ：用户能够通过浏览器自动搜索并连接到附近的蓝牙打印机。 文件打印 ：用户可以选择本地文件（如 PDF、Word、图片等格式）并通过蓝牙打印机进行打印。 用户界面 ：提供一个简洁明了的用户界面，方便用户选择打印机、上传文件和...
一个 API,带你打开前端摄像头之门
当然不想了解就直接跳转看完整代码 获取设备列表 获取视频流 需要注意的是,此功能仅在本地环境或者线上的安全环境（HTTPS）下可用 言归正传,在日常业务开发中,我们经常会遇到调用摄像头的场景 最常见的就是前端调用摄像头,然后生成一张照片,用于业务开发 常规开发 首先我们来看看常规开发模式 代码其实非常简单,直接上代码(已附上完整注释) 渲染视频流 拍照功能 常规的思路,我们肯定是截取 video 的某一帧,然后渲染到 canvas 上面...
不会才知道并不是所有的mp4视频都能被video标签播放吧？
今天遇到个奇怪的bug，好好一个mp4视频在本地所有设备均可正常播放，但是上传至cos之后插入富文本，发现video标签只能识别出音频，并无视频。排查半天才找出问题所在，特此记录一下！欢迎各位看官关注作者的微信公众号 ，获得最新技术分享。 首先video标签并不能解析所有视频编码格式，它只支持MPEG4，Ogg，WebM 三种视频格式。支持的视频格式及编码格式如下： 但是，video标签对这三种视频格式是有具体要求的 Ogg = 带有...
面试官：sessionStorage 能在多个标签页之间共享数据吗？
sessionStorage 能在多个标签页之间共享数据吗？在回答这个问题之前我们先来聊聊另一个存储API localstorage localstorage 与 sessionStorage 经常是放在一起讨论，那他们之间的区别是什么呢？ 只读的 属性允许你访问一个 源（origin）的对象 ；存储的数据将保存在浏览器会话中。 类似 ，但其区别在于：存储在 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 的数...
2024web打印解决方案
背景 最近在做公司后管系统的打印工具,翻了很多资料这里针对个人封装的，以及现有的一些方案对比，总结一下。 1\. 浏览器打印 通过 调用浏览器打印 优点: 1. 比较简单 2. 可以直接选择打印机打印 缺点： 1. 不同浏览器中存在区别：在Safari和Chrome都会弹起打印预览的窗口，FireFox和 IE 没有预览而是直接让你选择打印机 2. 打印的是整个网页，不能局部打印 3. 打印不支持自定义分页行为，默认不支持批量打印 4....
Tone.js 音频播放器
使用 Tone.js 实现一个基本的音频播放器，该播放器不仅支持基本的播放控制，如播放、暂停、进度显示等等，还具备倍速播放和音高调整等功能 上一篇文章 基于 HTML5 的 Audio，实现了基本的音频播放器，也通过 Tone.js 实现了音高调整功能，但是该功能的实现没有和 Audio 的其他控制关联起来。 本文介绍如何使用 Tone.js 构建一个完整的音频播放器，并实现音高调整功能。 1\. 安装及引入 Tone.js 是一个功能...
还原现场 🔍 前端录制用户行为技术方案
目前，在我们的项目中通常会使用各种各样的埋点和监控来收集页面访问的信息，例如点击埋点、PV埋点等，这些埋点数据能够反应绝大部分的用户行为，但是对于一些关注上下文的使用场景而言这些埋点是不够的。 对于 产品 而言，通过点击或PV埋点来判断功能的使用情况有时候不够的，通常需要知道用户的真实使用路径以判断用户使用是否与功能设计所预想的保持一致，从而能够更好地分析用户使用情况并进一步优化和推广。 对于 开发 而言，当我们收到系统异常通知的时候，...