peade的博客

这个event中， target、currentTarget、srcElement都是null， 元素，在path中。很直接的，就想到了img的onload事件，在onload事件执行的时候，再去获取图片的宽高。页面中有多张图片，在onload事件event中，获取img元素信息，是最好的方式。在开发的项目中，需要在图片加载完成后，获取图片的实际宽高。因此在onload事件中，获取元素信息的方法，要做兼容处理。在safari浏览器中，event信息打印如下。

这段代码存在一个问题：视频原本的高度比容器高，则容器内部元素总高度实际会超过500px。没有生效，直接按原高度展示，最终超过了容器的高度。mid的实际高度，会根据容器剩余空间自由扩展。产生这个问题的原因在于，video的。...

在请求中，有一种数据传输的 是。这种数据格式的接口，在发送请求时，与我们习惯的的形式不一样。这半个月，有个地方没理解透，被坑了很长时间。接口是通的，按接口的要求，把数据传输过去，收到的结果始终是处理错误。但是通过，用同样的数据进行请求，收到的结果就是正常的了。这种数据格式，是表单的默认格式。下面简单演示一下， 这个请求的处理要求。...

const iv = [72,69,76,76,79]// 转成unicode 字符串const ivStr= String.fromCharCode(...iv)const ivHex=crypto-js.env.Utf8.parse(ivStr)参考https://blog.youkuaiyun.com/Wancc123/article/details/118971910

UMD js 写法(function (root, factory) { if (typeof define === "function" && define.amd) { define(["libName"], factory); } else if (typeof module === "object" && module.exports) { module.exports = factory(require("libNa

在做H5页面，发现在ios下，存在以下的现象：A,B两个兄弟元素，A覆盖在B上面。在A上面滑动手指，会引起B元素内部滚动。body元素和内部元素。内部元素A绝对定位在上面。在A上面滑动手指，body会滚动。针对 1 情况，目前没想到解决方法。针对 2 情况， 解决方法如下：简单处理 overflow方案export const bodyScroll={ stop(){ document.body.style.overflow='' }, restore(){

需求最近有一个需求，需要关闭前一个页面打开的新标签页。查了很多资料，最终解决问题。关闭标签页所需条件标签页必须由js代码打开window.opener不能未null当前标签页history栈只能有一条具体代码// 以下两种方式都可以window.close()open(location.href, '_self').close()参考资料https://stackoverflow.com/questions/2076299/how-to-close-current-tab-in

今天遇到一个问题，在项目里，引入umd模块时报错了。解决方案是，需要增加一个babel插件：安装插件：npm i -D @babel/plugin-transform-modules-umd配置.babelrc.jsmodule.exports = { presets: ['react-app'], plugins: ['@babel/plugin-transform-modules-umd'],}...

缘起最近在做的一个项目，用iframe展示法律条款，判断滚动到底部时，允许进行下一步操作。页面里采用flex布局，分三块，上面标题、中间iframe展示，底部下一步操作按钮。愉快地开发完成后，经测试，各个手机都很正常，唯有一个ios12的手机，iframe无法滚动。分析ios12是支持flex布局的。但是页面呈现的时候，iframe本身的高度似乎是完全展开的。问题应该就是ios12及以下版本对iframe的处理不一样。 在更高版本的ios系统，并没有这个问题。解决参考： https://www.

在开发移动端视频video时，存在两个兼容性问题：视频播放时全屏视频播放时层级最高视频播放时全屏移动端浏览器在播放时，默认是全屏播放。改为内联播放方式为：ele.setAttribute('playsinline', props.options.playsinline);ele.setAttribute( 'webkit-playsinline', props.options.playsinline);ele.setAttribute('x5-video-player-type', 'h

汇总安卓浏览器浏览器userAgent小米浏览器Mozilla/5.0 (Linux; U; Android 11; zh-cn; Redmi K30 Pro Build/RKQ1.200826.002) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/79.0.3945.147 Mobile Safari/537.36 XiaoMi/MiuiBrowser/14.7.10华为浏览器Mozilla/5.0 (

开发中发现的问题：在fixed蒙层中嵌入了一张图片。在苹果手机中，微信环境下，打开页面，长按图片，不会出现图片另存为等按钮。解决方法：取消蒙层方式，图片正常嵌入到页面环境中。

config.optimization.minimizer('terser').tap(args => { args[0].terserOptions.compress.drop_console = true return args })

设置video, audio静音，这两种元素，都有个muted属性。于是，我自然而然的想到的操作方法是：const ele=document.querySelector('video')ele.setAttribute('muted','muted')实践证明，这种操作，不起作用。起作用的写法是const ele=document.querySelector('video')ele.muted='muted'html中元素自带的属性，都可以用ele.attr的方式来操作。...

中文正则姓名校验正则分拆成多个/^([\p{Unified_Ideograph}·]){2,20}$/u.test("徐发")!/^·/.test('徐发')!/·$/.test('徐发')!/·{2,}/.test('徐发')

在eslintConfig的env配置项上，加上下面的内容即可。 "env": { "es6": true },

现在VSCode的插件特别多了

今天踩了一个坑。在一个项目里，使用vant ui框架，带>的输入框，点击后，底部弹出选项。我选择了van-field组件，使用了里面的is-link属性。然后，就遇到了一个bug，在iOS里，点击组件时，会直接回到页面顶部，底部弹窗出不来。仔细分析了一下，应该是is-link会使用a标签。a标签没有href值时，会默认回到页面顶部，相当于又跳到当前链接。这就导致了我遇到的bug。要避免这样的情况出现，就是要避免将a标签做普通标签来使用。...

微信环境下支付在微信环境下，调用微信支付，按照jssdk文档里的写法，直接调用支付方法就行。wx.chooseWXPay({ timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: '', // 支付签名随机串，不长于 32 位 package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\

Phaser笔记添加事件添加事件phaser 元素上添加事件，需要设置元素interactive()

今天在开发的时候遇到个跨域，苹果手机 在测试环境正常，生产环境不正常。安卓手机在测试环境和生产环境都正常。这个问题，排查了好久。最后发现，生成环境下，页面域名是https开头的，而跨域请求的文件地址是http开头的。最后将文件地址也改成了https开头，就解决了这个问题。iOS的安全策略显然比安卓更激进。https下的跨域访问，必须是https才行。...

在开发的时候，发现一段较为有趣的旧代码。在这段代码里，开发人员利用form表单，发起了post请求，并在新页面打开了这个请求。在习惯了用ajax来进行交互，看到这种方式，有种眼前一亮的感觉。我一直以为没有办法在新的页面里打开post请求，但是通过这种方式，就能实现了。我网上查一下form表单的基本信息Form 对象属性属性描述W3CacceptCharset服务器可...

安装加密解密库npm install Base64 --save加密let res = Base64.btoa('str')解密Base64.atob(res)

4开头的错误，都是前端在写ajax时，写的不对，导致的错误400badrequest发生的原因是，主要有两个。一、往后台送的数据格式不对，就是content-type里面的值不是后端要求的值。例如后端要求送json格式，你往后端送了文本格式或xml格式，就会报错。二、往后台送的参数不对，少传或多传了参数，这导致后台无法对参数进行处理，也会报这个错。...

在用swiper做个展示的页面，在页面滚动的时候，会出现上下导航按钮，用户点击时，下滚或上滚。当到第一个或最后一个时，不能点击的导航按钮还在，只是透明度变低了。解决这个的方法就是，复写原始swiper样式。.swiper-button-disabled{ opacity:0;}...

我在配置ssh多个账户，折腾了许久个人配置的经验：1、尽量用git bash进行命令行操作，减少出错。2、生成多个sshkey时，要使用不同的邮箱3、生成的sshkey应该ssh-add加进去 ，具体操作，参考github的帮助文档具体操作，参考下面两个文章生成SSH-keyhttps://help.github.com/en/articles/...

mockjs的官方使用文档很简陋我看了些其他人使用的例子，自己弄了个简单示范// mockfile.jsimport Mock from 'mockjs'Mock.mock('http://mock.json', 'get', { a:'111', b:'222'})// index.jsimport $ from 'jquery'import 'moc...

https://stackoverflow.com/questions/54890019/webpack-devserver-host-0-0-0-0-not-working-on-windows0.0.0.0 is anon-routable meta-addressused to designate an invalid, unknown, or non-applicable tar...

在ios下，cover-view 始终是overflow:hidden方式显示，无论怎么调整，都不会变化。而在android下，overflow的样式可以被覆盖的。cover-view下，设置了z-index不起作用。基于以上的考虑，在设计图和页面实现时，应该考虑到这种情况的影响。存在页面元素交叉覆盖时，就不容易实现了。...

微信小程序会对用户信息等敏感数据进行加密。官网上是这么说明的：加密数据解密算法接口如果涉及敏感数据（如wx.getUserInfo当中的 openId 和 unionId），接口的明文内容将不包含这些敏感数据。开发者如需要获取敏感数据，需要对接口返回的加密数据(encryptedData)进行对称解密。 解密算法如下：对称解密使用的算法为 AES-128-CBC，数据采用PKC...

内容来自文档时差 (毫秒)1.0.0+编辑moment().diff(Moment|String|Number|Date|Array);moment().diff(Moment|String|Number|Date|Array, String);moment().diff(Moment|String|Number|Date|Array, String, Boolean);...

转载来的计算方法var birthday=new Date("1989-06-25".replace(/-/g, "\/")); var d=new Date(); var age = d.getFullYear()-birthday.getFullYear()-((d.getMonth()<birthday.getMonth()|| d.getMonth()==birthday...

// 页面滚动到顶部// 方法一document.body.scrollTop=document.documentElement.scrollTop=0// 方法二document.body.scrollIntoView()// scrollIntoView 是元素也有的方法, 可以用在页面元素上，例如document.getElementById('id').scrollInto...

let str = '中国|国庆阅兵|十周年大阅兵|祝福中国'let reg = /(^)?([^|]+)($)?/glet result = str.match(reg)console.log(result) // [ '中国', '国庆阅兵', '十周年大阅兵', '祝福中国' ]例子中的字符串，最简单的处理方式是用split进行切分就行了。如果遇到复杂的字符串，显然是需要正则来...

最近在写页面，文档里给的是excel表格的数据，要将excel表格里的数据放到页面里。这里涉及到了一个excel转table的处理问题。我首先想到的是去npm库里找一下有没有相应的库，搜了一圈，没搜到相关的，搜到的东西，都是table转excel的库。由于时间有限，没有时间自己去搞一个npm包来解决。于是，我用了下面这个方法：1、将excel文件，另存为html文件2、在浏...

1、node及npm配置npm包的淘宝源2、webstorm && vscode如果你是webstorm用户，还是建议装一下vscode，有时候，webstorm会卡到你必须用vscode来解决问题。3、nvmnode版本管理软件4、mongodb mysql这两个是数据库，mysql5版本用的多5、数据库管理软件，navicatJava后台...

使用$.when的时候，有时候需要传入不确定数量的promise，这个时候，就无法使用官方文档里，将确定数量的promise放进$.when里，使用apply方法，就可以解决这个问题。下面有完整的例子关键点：apply的运用与成功回调参数的获取function gendef(){ let def=$.Deferred() setTimeout(function(){ ...

父子页面获取对应的window对象，再通过window对象来处理# 父页面获取子页面的window对象window.document.querySelector('iframe').contentWindow# 子页面获取父页面的weindow对象window.parent...