背景
新项目有一个新的需求，需要用到浏览器录音。在本地进行测试的时候并没有发现问题，部署以后访问就出现了如下错误：
浏览器不支持 getUserMedia
经过了解得知getUserMedia 是默认不支持 http 访问的，必须要用 https 协议且需要合法的域名。
解决方法
使用https协议访问
申请域名并配置SSL证书，实现HTTPS协议请求访问即可避免此问题
配置浏览器临时解决方案
打开谷歌浏览器，在地址栏中输入chrome://flags/#unsafely-treat-insecure-origin-as-secure后并回车可见如下内容：
将目标网站输入到Insecure origins treated as secure中，然后将Disabled下拉改为Enabled。使用此方法即可临时解决无法...
7个月前 (04-30) 836℃ 0评论
0喜欢
背景
因业务需求原因，需要在网页上进行录音，使用Javascript来进行操作，完成录音并保存上传到指定服务器。实现相关代码后进行测试，发现访问音频设备最后被拒绝。
原因
网页上反馈的异常信息如下图所示
经过再次的查看，确认未经处理的异常信息如下：
DOMException: Permission denied by system
查下浏览器的设置，浏览器是否禁用麦克风，经过确认浏览器并没有发现什么问题。
浏览器各项检查都非常的正常，尝试录音错误依然再次出现，按道理来讲，应该是没有什么问题的。就目前情况而言，的确可能存在不讲道理的情况呀。随后更换一台电脑进行了一下测试，经过测试发现没有任何问题，正常录音。这就诡异了！也许是音频硬件原因？将这音频设备在其他电脑上进行再次确认，测试结果还是没有问题。这就让人郁闷了.
...
1年前 (2023-11-09) 1481℃ 0评论
0喜欢
背景
页面加载很多音频标签，音频资源一些加载不成功，音频标签不可用，并且排除以下几种情况：
检查音频的链接是否有效
检查音频格式是否支持
检查网络连接是否通畅
如果确认以上内容没有任何问题，则是页面加载过多的音频资源而导致部分音频资源加载失败。可以使用JavaScript进行资源加载重试，当然重试的策略需要进行限制，避免无限制尝试。
实现方式
以下是使用JavaScript代码实现自动重新加载资源的一个简单的示例，当音频标签加载失败时，它会自动尝试重新加载音频：
const audio = document.querySelector('audio');
audio.addEventListener('error', () => {
audio.load();
});
在上面示例中，首先选择了音频标签，并添加了一个...
1年前 (2023-07-16) 1405℃ 0评论
1喜欢
背景
某一个应用自动在网页上获取一些文本内容，本来是通过document.querySelector来找指定节点。经过一段时间网页貌似升级了，一些节点的class属性的值会出现随机的变动，每次class属性的值都会不一样。最初的方式就失去了作用，根据节点内容的分析发现可以通过xpath来获取。曾经在IE浏览器上使用过XPath，并且API相当简单。在非IE浏览器上貌似没有这么好用。以下内容在Chrome浏览器进行尝试，经过测试可以完成自己的预期工作。
浏览器支持
Mozilla是根据DOM标准来实现对XPath的支持的。DOM Level 3附加标准DOM Level 3 XPath定义了用于在DOM中计算XPath表达式的接口。遗憾的是，这个标准要比微软直观的方式复杂得多。虽然有好多与XPath相关的对象，最重要的两个是：XPathEvaluator和XPathRes...
2年前 (2022-12-03) 1715℃ 0评论
16喜欢
背景
现有一个考试项目，当在浏览器进行考试时需要判断用户是否存在切屏，如果切屏就对当前考试进行自动强制交卷。浏览器中可通过window对象的onblur、onfocus判断，或者document的hidden属性判断。
获取焦点（onfocus）和失去焦点（onblur）
关于是否失焦点，浏览器对象有onfocus 和 onblur事件可以监听。但是触发这两个事件的前提是页面之前是获取焦点的，就是说要是激活的。也就是说页面刚刚渲染完，用户在没有页面上任何操作时，页面是不会正常监听这两个事件的；或者页面在打开状态下，但是触发了onblur之后并无页面操作的情况下也不会正常监听这两个事件。直到，用户操作页面触发focus，之后离开页面才会触发blur，再次点击到当前页面时才会触发focus，如此反复都会触发相应的事件。
onblur
在chrome浏览器下，点击...
2年前 (2022-11-21) 3376℃ 0评论
5喜欢
背景
站点网上飘，哪有不挨刀。总是遇到千奇百怪的问题，让人猝不及防。在5月1日的前一天，发现博客被人镜像了，这是一个非常糟心的问题，我非常肯定的是这次的镜像不怀好意。为什么我会这么说呢？因为镜像站点域名太不像话了，太长了，有没有特殊的含义，所以我认为这种镜像网站是非常有恶意的。如下图：
镜像站点域名
JavaScript简单紧急处理
这种恶意的镜像站点无法绝对的杜绝，只能尽可能的减小影响。此次处理非常简单，直接使用Javascript对当前域名进行判断，与指定域名不符就跳转回指定的域名。
版本一
var local=window.location.host;
if(local.indexOf("skyfinder.cc")==-1){
location.href = location.href.replace(local,"skyfinder....
4年前 (2021-05-02) 957℃ 0评论
14喜欢
背景
人生在世，都会遇到各种问题，就连写个博客也不得安宁。突然发现自己的博客被别人恶意的以框架（iframe/object）形式嵌入了, 这种网页被嵌入框架的情况很常见，只是这次是我罢了。其实我不太明白，为什么要选择个人博客嵌入。不管怎么样自己还是得做出点响应，要不然自己总是觉得缺了一些什么。
发现
这次发现也算一次偶然，突然想看看统计数据，所以就登录到了百度统计查看记录，结果就发现了一些比较奇怪的来源，所以就尝试访问看了看。大致如下：
打开来源后就晓得博客被人恶意嵌入了框架或者被恶意镜像了，经过查看网页代码，确认博客是被恶意嵌入了框架(iframe)。如下图：
观点
这是2008年开始在国内流行另一种流氓行为：使用框架（Frame），将你的网页嵌入它的网页中。只是现在改为了object，其实也是框架了。
其实用框...
4年前 (2020-06-24) 2246℃ 0评论
14喜欢
昨天19:50左右突然收到之前同事的一条微信消息，发来一个网址。点开网址之后呈现的是一个信息内容网站，之后跳转到一个时时彩的网站。当时直接就关掉了，随后就问下他是不是被盗了账号，是不是使用了自动清理微信好友的公众号！最后得知其也在帮朋友查找这个网站跳转的问题，故发给我看一下。
背景由来
被恶意跳转的网站
随后使用Chrome开发人员工具看了下网页加载，基本就确定是被注入了JavaScript代码，至于注入了什么地方就需要另行查证。在页面进行了相关的查证，并没有发现任何JavaScript的跳转代码。最后考虑外部文件，果然发现了恶意的跳转代码。如下图：
被插入的恶意跳转
发现被插入的代码以后，立即告知了他。他即刻进行了修改。强制刷新以后，问题不再出现。奈何几分钟后此问题再次复现，并且位置已经发生改变。这一定是被入侵或者是挂了马的，随后将推测告知并让其采用其他...
6年前 (2019-03-07) 963℃ 0评论
0喜欢
左右带有箭头的焦点图轮播
点击左右箭头可以实现图片切换效果。
右下角有图片切换页次。
jQuery实现此功能。
浏览器支持
IE浏览器支持此特效。
edge浏览器支持此特效。
谷歌浏览器支持此特效。
safria浏览器支持此特效。
opera浏览器支持此特效。
火狐浏览器支持此特效。
下载:
左右带有箭头的焦点图轮播
转载请注明：清风亦平凡 » 左右带有箭头的焦点图轮播
...
6年前 (2018-12-13) 1139℃ 0评论
0喜欢
全屏自适应焦点图轮播
实现了焦点图轮播效果。
焦点图轮播具有横向自适应功能。
浏览器支持:
IE浏览器支持此特效。
谷歌浏览器支持此特效。
火狐浏览器支持此特效。
opera浏览器支持此特效。
safria浏览器支持此特效。
下载：
全屏自适应焦点图轮播
转载请注明：清风亦平凡 » 全屏自适应焦点图轮播
...
6年前 (2018-12-11) 932℃ 0评论
0喜欢
SON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案，本文介绍它的原理和用法。
一、跨域认证的问题
联网服务离不开用户认证。一般流程是下面这样。
1、用户向服务器发送用户名和密码。
2、服务器验证通过后，在当前对话（session）里面保存相关数据，比如用户角色、登录时间等等。
3、服务器向用户返回一个 session_id，写入用户的 Cookie。
4、用户随后的每一次请求，都会通过 Cookie，将 session_id 传回服务器。
5、服务器收到 session_id，找到前期保存的数据，由此得知用户的身份。
这种模式的问题在于，扩展性（scaling）不好。单机当然没有问题，如果是服务器集群，或者是跨域的服务导向架构，就要求 session 数据共享，每台服务器都能够读取 session。
举例来说，A 网站和 B 网站是同一家公司的关联服务。现在要求，用...
6年前 (2018-12-09) 1096℃ 0评论
0喜欢
响应式焦点图轮播效果:
实现了焦点图轮播效果。
根据屏幕大小的不同显示效果会不同。
jQuery实现此功能。
浏览器支持:
IE浏览器支持此特效。
edge浏览器支持此特效。
谷歌浏览器支持此特效。
火狐浏览器支持此特效。
opera浏览器支持此特效。
safria浏览器支持此特效。
下载:
响应式焦点图轮播效果
转载请注明：清风亦平凡 » 响应式焦点图轮播效果
...
6年前 (2018-12-05) 1029℃ 0评论
0喜欢
grayscale.js 是一个实现网页元素 “灰度” 效果的js插件，可以运行在大多数的浏览器中，在 Mozilla Firefox 2/3, Safari4, IE6 / 7, Opera 9 中成功运行。
下载:
grayscale.js
更多信息参考：https://j11y.io/javascript/grayscaling-in-non-ie-browsers/
转载请注明：清风亦平凡 » “灰度”效果的js插件 GRAYSCALE.JS
...
6年前 (2018-12-05) 1610℃ 0评论
2喜欢
Date 对象算是较常用的对象之一，但很多人完全不会操作，就算一些简单的操作也用 moment 而不自己尝试一下。本次分享下 Date 中的 date 使用技巧，希望能给大家启发。
MDN官网介绍
setDate()方法根据本地时间来指定一个日期对象的天数。如果 dayValue 超出了月份的合理范围，setDate 将会相应地更新 Date 对象。例如，如果为 dayValue 指定0，那么日期就会被设置为上个月的最后一天。
获取月份天数
// 获取月份天数
function getMonthDayCount(year, month) {
return new Date(year, month, 0).getDate();
}
console.log(getMonthDayCount(2017, 10)); // 31
Date 第三个参数的本质跟 setDate 是...
6年前 (2018-12-03) 1021℃ 0评论
3喜欢
在某些情况下，需要获得用户的DPI。以下方法是用JavaScript实现获取用户的DPI。
function getDPI() {
var arrDPI = new Array;
var devicePixelRatio = window.devicePixelRatio || 1;
var tmpNode = document.createElement("DIV");
tmpNode.style.cssText = "height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;";
document.body.appendChild(tmpNode);
arrDPI[0] = parseInt(tmpNode.o...
9年前 (2016-07-02) 2442℃ 0评论
3喜欢