![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WEB前端
麦兜_冰夕
这个作者很懒,什么都没留下…
展开
-
前端常见正则(IPv4、IPv6、域名、掩码、汉字、邮箱等)
【代码】前端常见正则(ip、域名、掩码、汉字、邮箱等)原创 2024-07-16 11:51:23 · 108 阅读 · 0 评论 -
Beyond Compare4破解方法
Beyond Compare4破解方法原创 2024-02-24 16:19:20 · 4655 阅读 · 1 评论 -
浏览器的缓存机制
缓存会根据进来的请求保存输出内容的副本,当一下个请求到来的时候,如果是相同的url,缓存会根据缓存机制决定是否直接使用副本响应访问请求,还是向服务器再次发送请求.比较常见的就是浏览器会缓存访问过的页面,当再次访问这个URL地址的时候,如果网页没有更新就不会再次下载网页,而是直接使用本地缓存的网页;服务器返回资源的时候,会在响应头信息中带上资源实体标签EntityTag,可以用来作为浏览器再次请求过程的校验标识,如果发现校验标识不匹配,说明资源已经被修改过或过期,浏览器需要重新请求资源。.........转载 2022-07-25 09:15:26 · 241 阅读 · 0 评论 -
webpack代理配置
vue.config.js中如下所示devServer: { port: 8080, headers: { 'Access-Control-Allow-Origin': '*', }, proxy: { '/emer-user/*': { target: 'http://xxx.com/emer-user', changeOri原创 2021-08-19 10:28:22 · 643 阅读 · 1 评论 -
Nginx与浏览器缓存
Nginx与浏览器缓存一、浏览器对缓存的处理:Internet选项 ★ 控制请求服务器策略:是忽略资源的缓存策略的情况下额外强制请求服务器的意思。 ★检查存储的页面较新版本 1.每次访问网页时 不管是否有缓存、资源状态是否过期,都会再次请求服务器。 2.每次启动Internet Explorer时 不管是否有缓存、资源状态是否过期,都会再次请求服务器。 3.自动 ...转载 2021-05-27 11:16:25 · 494 阅读 · 0 评论 -
echarts 图不显示(警告:Dom has no width or height)
场景还原:一个态势页面,有五个部分组成,这五个部分分别是单独的HTML文件,通过母页中的JS动态加载这五个部分的HTML文件到母页中。通用的CSS和JS都在母页中,echars 的展示都在子页中,设置延迟100ms加载echart图形。问题:打开母页页面,echarts 不显示,但偶尔又能显示出来,不显示的时候会有警告Dom has no width or height。解决方案:加载echart的延迟时间设置为1分钟就可以正常显示了。原理:debug 发现,当报错Dom has ...转载 2021-04-21 15:32:57 · 3093 阅读 · 0 评论 -
2021-03-16
pc端web页面开发时,发现windows系统经常推荐用户使用125%、150%比例的缩放窗口,这样导致web页面被进行缩放,除此之外还有人为的按钮缩放。故此,在页面devicePixelRatio(设备像素比例)变化后,通过计算页面body标签zoom修改其大小,来抵消devicePixelRatio带来的变化。解决所用devicePixelRatio.js/** * @author lyn * @date 2021-03-16 * @description 校正windows页面在系统原创 2021-03-16 10:51:19 · 106 阅读 · 0 评论 -
vue scoped后无法修改elementUI组件样式
问题:在app.vue中引入公共样式mainStyle.css文件对input的width已做设置,在page.vue页面对el-input的width需单独设置宽度,设置完后不生效,生效的为ainStyle.css文件对input的width,对应page.vue页面代码如下<template> <div> <el-input class="groupName" placeholder="请输入" auto-complete="off">&原创 2020-08-24 17:40:36 · 644 阅读 · 0 评论 -
前端实现下载表格数据
1.html部分table id为“grid-log”,导出按钮id为“exportbtn”,表格数据为bootgrid插件渲染而成 <table id="grid-log" class="table table-condensed table-hover table-striped table-responsive" data-store-selection="true"> <thead> .原创 2020-07-28 17:41:06 · 1462 阅读 · 1 评论 -
web性能优化
前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么 ?1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。大概有如下优化方法: 具体参考:转载 2020-07-17 18:24:21 · 270 阅读 · 0 评论 -
常见web安全攻防总结
Web 安全的对于 Web 从业人员来说是一个非常重要的课题 , 所以在这里总结一下 Web 相关的安全攻防知识,希望以后不要再踩雷,也希望对看到这篇文章的同学有所帮助。今天这边文章主要的内容就是分析几种常见的攻击的类型以及防御的方法。 也许你对所有的安全问题都有一定的认识,但最主要的还是在编码设计的过程中时刻绷紧安全那根弦,需要反复推敲每个实现细节,安全无小事。 本文代码 Demo 都是基于 Node.js 讲解,其他服务端语言同样可以参考。 XSS首先说下最常见的 ...转载 2020-07-14 15:30:19 · 922 阅读 · 0 评论 -
前端工程化的理解
什么是"前端工程化"?目前来说,web业务日益复杂化和多元化,前端开发从WebPage模式为主转变为WebApp模式为主了。前端的开发工作在一些场景下被认为只是日常的一项简单工作,或只是某个项目的"附属品",并没有被当做一个"软件"而认真对待(无论是产品负责人还是开发者)。在模式的转变下,前端都已经不是过去的拼几个页面和搞几个jq插件就能完成。当工程复杂就会产生许多问题,比如:如何进行高效的多人协作? 如何保证项目的可维护性? 如何提高项目的开发质量? 如何降低项目生产的风险? ...转载 2020-07-14 14:51:43 · 374 阅读 · 0 评论 -
消除input、button点击后默认激活样式
button:focus, input:focus{ outline:none;}原创 2020-05-19 11:29:08 · 1927 阅读 · 0 评论 -
前端开发经验总结
同一个HTML文件中id不能相同,id命名下划线,class中划线,变量驼峰式 定时器使用前必须先清除,一个页面若同时有多个计时器,可将清楚计时器的写在一个函数内,尽量避免计时器的嵌套调用,若有嵌套调用时必须清楚时间间隔及函数执行次数与顺序 Js文件引入时有先后顺序之分,有所依赖的例如jquery.js要在bootstrap.js之间引入;没有依赖且与页面初次渲染DOM树无关的事件处理的js文...原创 2020-02-16 19:35:25 · 1147 阅读 · 0 评论 -
css实现三角动态翻转
.accordion{ background-color: transparent; width:0; height:0; border: 6px solid transparent; border-top-color: #0ACCE0 ; ...原创 2020-01-06 11:06:55 · 627 阅读 · 0 评论 -
js 函数传参实参包含路径“\”处理
var test = "D:\blockchain\webapps\uxdm\WEB-INF\classes\com"; //包含路径的实参var param = test.replace(/\\/g,'\\\\'); /...原创 2019-12-20 10:28:27 · 654 阅读 · 0 评论 -
type=file,ajax Content-Type: multipart/form-data 表单提交 ,阻止表单跳转
<form id="form_edit" action="/uxdm/math/management/updateSecurityRule.do" method="post" enctype="multipart/form-data" target="postframe"> <input type="text" name="securityRuleName"/&...原创 2019-11-22 15:51:57 · 490 阅读 · 0 评论 -
ES6的数组解构赋值浏览器兼容问题
let [arr1,arr2,arr3] = [[1,2,3],["a","b","g","f"],[{"name":"John"},{"name":"Ally"}]];在IE 11 中会报错,IE 11不支持数组的解构赋值火狐、谷歌支持原创 2018-04-12 16:57:10 · 2791 阅读 · 0 评论 -
JS数组去重,删除对象属性
1.数组去重var arr = ['apple','strawberry','banana','pear','apple','orange','orange','strawberry']; var r = arr.filter(function(element,index,self){ return self.indexOf(element) === index; }); co...原创 2019-01-22 11:01:15 · 1215 阅读 · 0 评论 -
UTF-8编码占几个字节?
占2个字节的:带有附加符号的拉丁文、希腊文、西里尔字母、亚美尼亚语、希伯来文、阿拉伯文、叙利亚文及它拿字母则需要二个字节编码占3个字节的:基本等同于GBK,含21000多个汉字占4个字节的:中日韩超大字符集里面的汉字,有5万多个一个utf8数字占1个字节一个utf8英文字母占1个字节少数是汉字每个占用3个字节,多数占用4个字节。 占用3个字节的范围 ...转载 2019-01-29 16:18:00 · 19985 阅读 · 0 评论 -
使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别
注:HTML5不再支持使用frame,iframe只有src 属性(可设置width\height等属性及标准属性,依旧生效)一、使用iframe的优缺点优点:1.程序调入静态页面比较方便;2.页面和程序分离;缺点:1.iframe有不好之处:样式/脚本需要额外链入,会增加请求。另外用js防盗链只防得了小偷,防不了大盗。2.iframe好在能够把原先的网页全部原封不动显示下来,但是如...原创 2019-03-05 10:16:29 · 2056 阅读 · 0 评论 -
ES5、ES6的浏览器兼容性
从https://www.caniuse.com上面可以查询到,ES的兼容性概览。下面就主要浏览器进行说明:IE:可以看到IE6,IE7是完全不支持的。而IE8是只支持一些内容,参考引用4,IE9是大部分支持,支持度参考引用2。Chrome:Chrome 23版本之后就是完全支持的了。19~22版本有不兼容的地方,参考引用1。Firefox:Firefox 21版本之后就是完全支持的...原创 2019-03-05 10:54:51 · 24280 阅读 · 0 评论 -
WEB前端编码规范及个人经验总结
1.关于JS的引入顺序问题建议在body标签下引用,不会阻止浏览器页面的渲染。如若非要在<head>标签内部提前引用,对于涉及DOM操作的js函数建议在<body onload="init()">标签中加入onload事件,js操作需放入init()函数中。2.对于window.onloadonload事件不要用匿名函数。一个html页面中可同时调用...原创 2019-03-14 18:37:03 · 265 阅读 · 0 评论 -
Js 数组——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()
filter(): 语法: varfilteredArray = array.filter(callback[, thisObject]); 参数说明:callback:要对每个数组元素执行的回调函数。thisObject :在执行回调函数时定义的this对象。//过滤掉小于 10 的数组元素://代码:function isBigEno...转载 2019-03-26 16:10:00 · 166 阅读 · 0 评论 -
利用JQuery、js操作iframe父页面、子页面的元素和方法汇总
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,本文主要给大家分享了关于简单使用JQUERY来操作IFRAME的一些记录,这个使用纯JS也可以实现。下面话不多说了,来一起看看详细的介绍吧。第一、在iframe中查找父页面元素的方法: 1 $('#id', window.parent.document) 第二、在父页...转载 2019-04-12 11:33:30 · 2842 阅读 · 1 评论 -
前端性能优化点
一. HTTP优化1. 减少HTTP请求合并文件,例如css代码和js代码分别合并到一个css文件和js文件中; 使用css sprite,详细请参考css优化中的css sprite部分。 使用base64技术2. 重定向优化消除没必要的跳转 利用服务器重写用户键入的链接 使用HTTP而不是js或者meta来重定向3. 避免死链/空链/404/410错误避免出现...转载 2019-04-18 15:37:29 · 120 阅读 · 0 评论 -
如何在网页中用上自己下载的字体
在开发过程中市场会遇到需要特殊的字体,所谓的特俗字体就是常用字体库中不包含的字体。这时候,我们可以从网络上下载到我们需要的字体,然后引用到我们需要的网页中去。我们可以用CSS来引用字体路径。@font-face可以实现从服务器端加载字体,所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意,早在2001年时就被提出来,只不过近两年才被各浏览器广泛支持。而...原创 2019-05-07 10:06:10 · 1212 阅读 · 0 评论 -
css解决浏览器输入框记住账号密码后的背景色
谷歌chrome浏览器在用户登录记住密码之后通常会改变input框的背景色,这是每一个程序猿不想看到的事情,下面提出解决这个问题的方法之一:↓ ↓ ↓css代码:input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #eded...原创 2019-05-22 18:34:30 · 710 阅读 · 0 评论 -
去掉Firefox输入框记忆
一,去掉Firefox输入框(input)记忆。Firefox输入框(input)有自动记忆功能,该功能会在表单提交后自动记忆输入框输入过的数据,当你再次在输入框中输入数据时,被记忆过的数据会在该输入框下自动给出提示。我们在实现补全提示功能时,Firefox输入框(input)的自动记忆提示信息会浮动在我们代码实现的补全提示框上,这样会遮挡住我们实现的补全提示信息。解决此问题就是会给...原创 2019-06-24 10:31:54 · 2837 阅读 · 0 评论 -
JQuery禁用浏览器前进、后退按钮
$(document).ready(function () { if (window.history && window.history.pushState) { $(window).on('popstate', function () { // 当点击浏览器的 后退和前进按钮 时才会被触发, window.history.pushState('forw...原创 2019-08-20 16:40:35 · 2503 阅读 · 0 评论 -
html读取input type=file文件内容
<input id="uploadInput" type="file" class="file_input" name="myFiles" onchange="UpdateOnChange(this);" multiple>上传文件function UpdateOnChange(that){ redFile(that,function(name,data){ var di...原创 2019-08-21 15:24:07 · 5739 阅读 · 0 评论 -
背景为图片的按钮css实现按钮背景图置灰
.l-btn-disabled { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: pr...原创 2019-08-23 15:24:28 · 1815 阅读 · 0 评论 -
前端javascript代码规范格式化工具使用
一、fecs使用简介:FECS 是基于 Node.js 的前端代码风格工具。安装:npm install fecs -g使用:fecs check "c:\test.js"//检查格式问题 fecs format "c:\test.js" //修正格式化二、集成 Baidu-FE-Code-Style插件到webstorm工具检查编码规范简介:Baidu FE ...原创 2020-09-25 14:31:24 · 534 阅读 · 0 评论 -
JS数组对象去重
var allData = [ {key:1,value:2}, {key:2,value:3}, {key:1,value:2}, {key:1,value:3} ]; var result = []; var obj = {}; for(var h =0; h<allData.length; h++){ i...原创 2019-01-24 19:07:52 · 466 阅读 · 0 评论 -
前端文件下载
<a href="../../common/tool/numbertool.zip" download="U盘序列号获取工具.zip">序列号工具下载</a>原创 2019-01-24 18:14:04 · 506 阅读 · 1 评论 -
@keyframes嵌套在@media中IE浏览器兼容问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>@keyframes嵌套在@media中IE浏览器兼容问题</title> <script src="./jquer原创 2018-04-20 14:28:18 · 3433 阅读 · 0 评论 -
html页面实现下载功能,html网页实现服务器下载、本地文件下载功能
使用按钮进行监听下载的两种方法如下(推荐使用第二种,第一种若通过winddow.location.orgin获取协议+host+port时,网页会默认访问到网站的根目录下,Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址,若要下载的文件目录在Web根目录之外,则找不到路径,导致无法下载)一是window.open():适用于...原创 2018-04-24 17:09:45 · 28720 阅读 · 0 评论 -
js中几种实用的跨域方法原理详解
js中几种实用的跨域方法原理详解这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:要解决跨域的问题,我们可以使用以下几种方法:一...转载 2018-05-02 10:19:50 · 100 阅读 · 0 评论 -
webstorm 最简单方便的激活破解方法
注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址:http://idea.codebeta.cn (新,感谢Rachelsalaheiyo提供)http://idea.imsxm.com/点击:Activate即可。...原创 2018-04-24 10:52:12 · 681 阅读 · 0 评论 -
获取input type=file的文件名及input type=file获取文件名的浏览器,设置input type=file样式
获取input type=file的文件名方法:let filePath = $("input[type = 'file']").val(); //获取路径let urlArr = filePath.split("\\"); //以反斜杠'\'截取文件名为数组 let fileNam...原创 2018-04-23 18:57:43 · 10922 阅读 · 0 评论