一切福田，不離方寸，從心而覓，感無不通。

Category Archives: Frontend

发现个有意思的debuger代码

无意中看到一个页面加了个防止别人用开发者工具调试自己网页的代码~

1
2
3
  (function anonymous() {
    debugger
  })

 

龙生   11 Dec 2025
View Details

修复 UEditor 上传视频的相关问题

相关问题： 1.上传后无法播放的问题 2.编辑后视频丢失的问题 3.切换 html 按钮src链接丢失问题 4.插入视频后预览出错的问题 解决方案： 1. 打开 ueditor.all.js 文件，搜索 me.commands["insertvideo"] 将 edui-faked-video 改为 edui-faked, 防止此处被替换为 image 标签 将 image 改为 video, 实现视频实时预览，修复保存导致视频丢失

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    me.commands["insertvideo"] = {
        execCommand: function (cmd, videoObjs, type){
            videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];
            var html = [],id = 'tmpVedio', cl;
            for(var i=0,vi,len = videoObjs.length;i<len;i++){
                vi = videoObjs[i];
                //cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');
                //html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'image'));
                //TODO: 将 edui-faked-video 改为 edui-faked，防止此处被替换为image标签;
                cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked');
                //TODO: 将 image 改为 video, 实现视频实时预览，修复保存导致视频丢失;
                html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'video'));
            }
            me.execCommand("inserthtml",html.join(""),true);
            var rng = this.selection.getRange();
            for(var i= 0,len=videoObjs.length;i<len;i++){
                var img = this.document.getElementById('tmpVedio'+i);
                domUtils.removeAttributes(img,'id');
                rng.selectNode(img).select();
                me.execCommand('imagefloat',videoObjs[i].align)
            }
        },

2.打开 ueditor.config.js 文件，搜索 whitList 添加 _url,style,url 字段 添加 source, embed, iframe 规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
,whitList: {
a:      ['target', 'href', 'title', 'class', 'style'],
abbr:   ['title', 'class', 'style'],
address: ['class', 'style'],
area:   ['shape', 'coords', 'href', 'alt'],
article: [],
aside:  [],
audio:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'class', 'style'],
b:      ['class', 'style'],
bdi:    ['dir'],
bdo:    ['dir'],
big:    [],
blockquote: ['cite', 'class', 'style'],
br:     [],
caption: ['class', 'style'],
center: [],
cite:   [],
code:   ['class', 'style'],
col:    ['align', 'valign', 'span', 'width', 'class', 'style'],
colgroup: ['align', 'valign', 'span', 'width', 'class', 'style'],
dd:     ['class', 'style'],
del:    ['datetime'],
details: ['open'],
div:    ['class', 'style'],
dl:     ['class', 'style'],
dt:     ['class', 'style'],
em:     ['class', 'style'],
font:   ['color', 'size', 'face'],
footer: [],
h1:     ['class', 'style'],
h2:     ['class', 'style'],
h3:     ['class', 'style'],
h4:     ['class', 'style'],
h5:     ['class', 'style'],
h6:     ['class', 'style'],
header: [],
hr:     [],
i:      ['class', 'style'],
            // TODO: 添加 _url,style,url 字段
img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src','_url', 'loadingclass', 'class', 'data-latex','style', 'url'],
ins:    ['datetime'],
li:     ['class', 'style'],
mark:   [],
nav:    [],
ol:     ['class', 'style'],
p:      ['class', 'style'],
pre:    ['class', 'style'],
s:      [],
section:[],
small:  [],
span:   ['class', 'style'],
sub:    ['class', 'style'],
sup:    ['class', 'style'],
strong: ['class', 'style'],
table:  ['width', 'border', 'align', 'valign', 'class', 'style'],
tbody:  ['align', 'valign', 'class', 'style'],
td:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
tfoot:  ['align', 'valign', 'class', 'style'],
th:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
thead:  ['align', 'valign', 'class', 'style'],
tr:     ['rowspan', 'align', 'valign', 'class', 'style'],
tt:     [],
u:      [],
ul:     ['class', 'style'],
video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
            // TODO: 添加 source, embed, iframe 规则
            source: ['src', 'type'],
            embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
            iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']  
}

  3.打开 dialogs/video/video.js文件，搜索 createPreviewVideo 将 embed 换成 video 标签 3.打开 dialogs/video/video.js文件，搜索 createPreviewVideo 将 embed 换成 video 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    function createPreviewVideo(url){
        if ( !url )return;
 
         var conUrl = convert_url(url);
 
         conUrl = utils.unhtmlForUrl(conUrl);
 
         //$G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
        //'<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
        //    ' src="' + conUrl + '"' +
        //    ' width="' + 420  + '"' +
        //    ' height="' + 280  + '"' +
        //    ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
        //'</embed>';
        
        // TODO: 将 embed 换成 video 标签
         $G("preview").innerHTML =  '<video' +
            ' src="' + conUrl + '"' +
            ' width="' + 420 + '"' +
            ' height="' + 280 + '"' +
            ' autoplay' +
            ' controls="controls">'+
            '</video>';
    }

  from:https://www.cnblogs.com/Run2948/p/UEditor_Fixed_In_AspNetCore.html

龙生   09 Dec 2025
View Details

调用摄像头拍照chrome浏览器报Cannot read properties of undefined (reading 'getUserMedia')

一、背景： 项目中使用电脑摄像头拍照，调用navigator.mediaDevices方法，在本地正常，测试环境和生产环境报错。 二、原因： navigator.mediaDevices在目前以下情况中可以获取到 1.地址为localhost://访问 2.协议为https 3.为文件访问file:/// 测试环境和生产环境使用的都是http协议，因此无法调用 三、解决方法 1.在chrome地址栏输入chrome://flags/#unsafely-treat-insecure-origin-as-secure 2.在Insecure origins treated as secure的输入框输入要打开网页的地址如http://xx.xx.xx:8080 3.把右边的Disnabled改成Enabled 4.点右下角的Relaunch   转自于：https://hepuhua.cn/post/942.html#   from:https://www.cnblogs.com/Ao-min/p/18644211

龙生   23 Jun 2025
View Details

检查您的手机浏览器是否支持WebRTC技术

要检查您的手机浏览器是否支持WebRTC技术，可以通过以下方法： 方法1：使用WebRTC测试网站 访问测试网站： 在手机浏览器中，访问一个专门用于检测WebRTC支持的网站，例如Test WebRTC或WebRTC Troubleshooter. 这些网站会自动检测您的浏览器是否支持WebRTC，并给出相应的反馈。 查看测试结果： 网站会显示一系列测试结果，您可以查看是否所有的WebRTC相关功能都通过了测试。 方法2：手动检查浏览器设置 查看浏览器信息： 在浏览器的设置或帮助部分，查看浏览器的版本信息。通常，最新版本的主流浏览器（如Chrome, Safari, Firefox）都支持WebRTC。 更新浏览器： 如果您的浏览器不是最新版本，尝试更新到最新版。最新版本的浏览器更有可能支持WebRTC。 方法3：查找浏览器支持信息 在线查找： 在线搜索您手机上使用的浏览器名称以及“WebRTC support”，查看是否有关于该浏览器支持WebRTC的信息。 通过上述方法，您可以确认您的手机浏览器是否支持WebRTC。大多数现代浏览器都支持WebRTC，但如果发现您的浏览器不支持，可以考虑换用其他浏览器进行尝试。   from:https://blog.csdn.net/qq_52754410/article/details/134753983

龙生   23 Jun 2025
View Details

WebRTC + WebSocket 实现视频通话

　　WebRTC能让web应用和站点之间选择性地分享音视频流。在不安装其它应用和插件的情况下，完成点对点通信。 WebRTC背后的技术被实现为一个开放的Web标准，并在所有主要浏览器中均以常规JavaScript API的形式提供。对于客户端（例如Android和iOS），可以使用提供相同功能的库。 WebRTC是个开源项目，得到Google，Apple，Microsoft和Mozilla等等公司的支持。2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。

龙生   23 Jun 2025
View Details

axios 设置超时时间 timeout

timeout: 3 * 60 * 1000,

龙生   21 May 2025
View Details

Jquery Pagination分页插件使用

JqueryPagination是个简单轻量级的分页插件，使用起来很容易，只要初始化一个实例，并设置总数量、翻页回调函数、其它参数就可以实现无刷新分页功能了。

龙生   18 Dec 2024
View Details

解决 VScode 每次打开都是上次打开的文件问题

打开设置，搜索window.restoreWindows，设置为none

龙生   03 Dec 2024
View Details

Edge/Chrome浏览器强制将http转https的解决方案

Edge浏览器：edge://net-internals
Chrome浏览器：chrome://net-internals

龙生   19 Nov 2024
View Details

35+前端UI组件库一览（按star数排名）

material ui-react pc
Ant Design pc
Element UI pc
Vuetify(vue-Material风格) pc
chakra-ui pc
quasar mobile/pc
Vant 有赞前端团队 mobile
Element Plus – Ele pc
Ant Design Vue pc
Mint UI（vue） mobile

龙生   17 Nov 2024
View Details
1 2 … 59

Copyright © 2026 Longsheng All rights reserved