背景
新项目有一个新的需求，需要用到浏览器录音。在本地进行测试的时候并没有发现问题，部署以后访问就出现了如下错误：
浏览器不支持 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) 837℃ 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喜欢
背景
有一个客户需要对以前老项目部分功能进行升级，需要升级页面按照最新版本的内容进行更新，测试发现页面无法加载。F12使用开发者工具发现所有资源文件异常，所有的资源文件竟然自动将HTTP协议换成 HTTPS 协议。异常信息如下图所示：
项目目前部署是非HTTPS的，很奇怪为什么会自动转换为HTTPS资源。经过排查在异常页面中发现了问题，在head节点下发现以下代码
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
以上内容会将HTTP协议自动转换为HTTPS协议。
Content-Security-Policy
Content-Security-Policy（CSP）允许站点管理者控制用户代理能够为指定的页面加载哪些资源。除了少...
2年前 (2022-10-25) 1291℃ 0评论
13喜欢
背景
在调整一个移动端的页面，测试过程中发现在苹果IOS系统的浏览器中缩放异常，其实页面操作上来讲是不需要当前页面缩放的。所以，就需要禁止当前页面的缩放操作。经过确认，可以使用以下代码实现禁止缩放操作。
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
Viewport
属性名取值描述width正整数或device-width定义视口的宽度，单位为像素height正整数或device-height定义视口的高度，单位为像素，一般不用initial-scale[0.0-10.0]定义初始缩放值minimum-scale[0.0-10.0]定义放大...
3年前 (2022-01-15) 1217℃ 0评论
0喜欢
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院今天发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。而各大网站均实现全站灰度，腾讯视频、爱奇艺停止所有娱乐类型视频入口。
实现全站灰度可以使用CSS或者使用其他JS插件处理，例如：grayscale js。本博使用的是CSS处理全站灰度，代码示例如下：
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
f...
5年前 (2020-04-04) 1044℃ 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喜欢
在一些博客上遇到点击鼠标的时候有文字或者符号漂浮，感觉挺不错的。如下图：
JQuery代码实现类似效果：
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e){
var a = new Array("Javascript", "DotNet", "C#", "Java", "C", "C++", "HTML", "CSS", "NodeJS", "PHP", "SQL");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX, y = e.pageY;
$i.css({...
6年前 (2018-11-22) 1125℃ 0评论
0喜欢
有时候需要通过JavaScript中获取网址中传递的参数，以下就提供两种方法，仅供参考。这个也是很早时候的内容了，由原来的QQ空间整理出来，这里也做下记录。
方法一：正则分析法
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
调用方法：
alert(GetQueryString("参数名1"));
alert(GetQueryString(...
6年前 (2018-10-11) 1042℃ 0评论
2喜欢
//数组类
function ArrayList() {
this.length = 0;
this.array = new Array();
this.Item = function(index) {
return this.array[index];
}
this.Add = function(value) {
this.array[this.length] = value;
this.length++;
}
this.Remove = function(value) {
if (this.length >= 1) {
for (var i = 0; i < this.length; i++) {
...
6年前 (2018-09-03) 860℃ 0评论
0喜欢
$.fn.outerHTML = function() {
return (!this.length) ? this: (this[0].outerHTML || (function(el) {
var div = document.createElement('div');
div.appendChild(el.cloneNode(true));
var contents = div.innerHTML;
div = null;
return contents;
})(this[0]));
}
转载请注明：清风亦平凡 » Jquery插件实现outerHTML
...
8年前 (2016-11-09) 1048℃ 0评论
0喜欢
一、为什么要用require.js？
最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
这段代码依次加载多个js文件。
这样的写法有很大的缺点。首先，加载...
8年前 (2016-08-22) 1214℃ 0评论
0喜欢
在iframe与父窗口或者与子窗口传递数据是一个麻烦的事情，如果我们能够写一个一劳永逸的接口那就再方便不过了，下面就来简答介绍一下如何实现此功能。原理就是将数据缓存早window.top这个窗口，这样无论子窗口父窗口的层次如何变化，数据总是存在不会变化的。
var dataShare = {
setData: function(name, value) {
var top = window.top,
cache = top['_CACHE'] || {};
top['_CACHE'] = cache;
return value ? cache[name] = value: cache[name];
},
removeData: function(name) {
var...
8年前 (2016-08-17) 1324℃ 0评论
0喜欢
在某些情况下，需要获得用户的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喜欢
此方法为招商银行网上银行对金额进行大写的转换方法。
function ConvertUpperMoney(whole) {
//金额转换。输入数字字符串，低至分位，高位不为零
var GBK_unit1 = "分角";
var GBK_unit2 = "圆拾佰仟";
var GBK_unit3 = "万拾佰仟"
var GBK_unit4 = "亿拾佰仟";
var GBK_num = "零壹贰叁肆伍陆柒捌玖";
var section1 = "";
if (whole.length - 2 >= 0) section1 = whole.substr(whole.length - 2, 2);
else section1 = whole.substr(0, whole.length);
...
9年前 (2016-07-02) 904℃ 0评论
0喜欢
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">function shake(id) {
var style = document.getElementById(id).style,
p = [4, 8, 4, 0, -4, -8, -4, 0],
fx = function() {
style.marginLeft = p.shift() + 'px';
if (p.length <= 0) {
style.marginLeft = 0;
...
9年前 (2016-07-02) 1121℃ 0评论
1喜欢
var TpLinkPassWordEnCode = {
_strDe: "RDpbLfCPsJZ7fiv",
_dic: "yLwVl0zKqws7LgKPRQ84Mdt708T1qQ3Ha7xv3H7NyU84p21BriUWBU43odz3iP4rBL3cD02KZciX" +
"TysVXiV8ngg6vL48rPJyAUw0HurW20xqxv9aYb4M9wK1Ae0wlro510qXeU07kV57fQMc8L6aLgML" +
"wygtc0F10a0Dg70TOoouyFhdysuRMO51yY5ZlOZZLEal1h0t9YQW0Ko7oBwmCAHoic4HYbUyVeU3" +
"sfQ1xtXcPcf1aT303wAQhv66qzW",
securityEncode: func...
9年前 (2016-07-01) 1852℃ 0评论
5喜欢
浅拷贝：
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
深拷贝：
function deepCopy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
...
9年前 (2016-07-01) 958℃ 0评论
0喜欢
/*
var d=new Date();
console.log(d.toString()); //2012-7-27 9:26:52
console.log(d.toString("")); //2012-7-27 9:26:52
console.log(d.toString("yyyy-MM-dd HH:mm:ss")); //2012-07-27 09:26:52
console.log(d.toString("yyyy年MM月dd日 HH:mm:ss")); //2012年07月27日 09:26:52
console.log(d.toString("yyyy-MM-dd HH:mm:ss fff")); //2012-07-27 09:26:52 237
console.log(d.toString("yyyy年 MMM dd ...
9年前 (2016-07-01) 1026℃ 0评论
0喜欢