🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 链滴笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

浏览器 - 重定向

2019-12-04 描述重定向到一个指定的 URL。提示使用 window.location.href 或者 window.location.replace()来重定向到指定的 url 传入的第二个参数用来模拟一个链接的点击(true-默认)或者一个 HTTP 的重定向(false)相关文章:浏览器-https 重定向代码 constredirect=(url,asLink=true)=>asLink?(window.

浏览器 - 页面重绘前进行回调

2019-12-03 描述在每一帧动画前调用提供的回调函数。提示需使用递归变量 running 为 true 时,将持续调用已提供回调函数的 window.requestAnimationFrame()对象中应包含 start 和 stop 两个方法,以便手工对记录状态进行控制第二个参数 autoStart 默认值为 true。当运行该函数时,默认调用 start 方法代码 constrecordAnimationFrames=(

浏览器 - 返回浏览器支持的 CSS 前缀属性

2019-12-02 描述如果浏览器中的 CSS 属性需要前缀支持的话请返回包含其前缀的完整属性。提示将各浏览器的前缀放入 prefixes 数组中使用 String.prototype.charAt()和 String.prototype.toUpperCase()将属性的第一个字母转换为大写,然后在前面添加上前缀使用 Array.prototype.findIndex()对 prefixes 数组进行检测,如果 do

浏览器 - 监听用户输入方式的改变 (advanced)

2019-11-29 描述当用户输入方式发生变化(mouseortouch)时运行回调。根据输入设备启用/禁用代码很有用。这个过程时动态的,并且适用于混合设备(例如:触摸屏笔记本电脑)。提示使用两个事件监听器假设一开始的输入为 mouse,然后在文档上绑定一个 touchstart 事件监听在 touchstart 中添加一个 mousemove 事件监听器来监听两次连续的 mousemove 事件触发是否在 20ms 内

浏览器 - 添加监听事件

2019-11-28 描述使用事件代理为支持该事件的元素添加一个监听事件。提示使用 EventTarget.addEventListener()为元素添加一个监听事件如果可选对象中存在 target 属性,且当事件对象和指定的选择器相匹配时,我们才可以调用提供了正确的 this 上下文的回调如果可选对象中存在 target 属性,返回自定义代理函数的引用,以便在移除监听事件的时候可以进行使用可选的 opts 默认为不需

浏览器 - 移除监听事件

2019-11-27 描述从一个元素上移除一个事件监听。提示使用 EventTarget.removeEventListener()从一个元素上移除一个使用 EventTarget.addEventListener()方法添加的事件监听第四个参数 opts 的默认值使用 false,否则的话需使用监听事件被添加时候的选项代码 constoff=(el,evt,fn,opts=false)=>el.removeEv

浏览器 - 监听 DOM 的修改 (advanced)

2019-11-26 描述返回 MutationObserver 创建的对象,当指定的元素发生每一次变化时,都会运行提供的回调函数。提示使用 MutationObserver 观察给定元素的变化使用 Array.prototype.forEach()为每一次被检测到的变化执行回调第三个参数 options 的各项值都设置为 true,其具体说明可参见 MutationObserverInit 代码 constobserve

CSS 视觉 - :is/:matches/:any 选择器

2019-11-25 描述:is 将选择器列表作为参数,可以选中该列表中的与之匹配的任何元素。这样紧凑的写法对有含有很多选择器的样式非常有用。HTML<header><p>Thisismyheaderparagraph</p></header><main><ul><li><p>Thisismyfirst</p><p>listitem</p></li></ul></main><footer><p>This

浏览器 - 节点列表转换为数组

2019-11-22 描述将 NodeList 转换为列表。提示在数组的创建中使用扩展运算符将 NodeList 转换为一个数组当然,你也可以使用 Array.from,该方法可为一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。使用他可以进行简单的数组去重合并:functioncombine(){letarr=[].concat.apply([],arguments);//合并数组 returnArray

浏览器 - 标签页是否正在被浏览

2019-11-21 描述如果浏览器中的标签页面正在被浏览,请返回 true,否则的话返回 false。提示使用 Document.hidden 这个页面显示的 API 属性来检查浏览器中的标签页面是可见还是隐藏可结合 visibilitychange 事件对标题进行修改,效果可参见博客,具体代码如下:document.addEventListener('visibilitychange',function(){if

浏览器 - 在元素前插入 HTML

2019-11-20 描述在指定元素之前插入一个 HTML 字符串。提示使用位置参数为 beforebegin 的 el.insertAdjacentHTML()方法将解析好的 htmlString 插入到 el 元素的前面位置参数可选值如下:beforebegin 元素之前 afterbegin 元素内部的第一个子节点之前 beforeend 元素内部的最后一个子节点之后 afterend 元素之后具体表现为 beforebegin

浏览器 - 在元素尾部插入 HTML

2019-11-19 描述在指定元素的尾部后插入一个 HTML 字符串。提示使用位置参数为 afterend 的 el.insertAdjacentHTML()方法将解析好的 htmlString 插入到 el 元素的尾部后面 insertAdjacentHTML 不会重新解析自身正在使用的元素,因此元素内部的现有元素不会被破坏。这避免了额外的序列化步骤,使其比 innerHTML 操作更快代码 constinsertAfter

浏览器 - https 重定向

2019-11-18 描述如果页面当前是 HTTP,把他重定向到 HTTPS。除此外,还应替换他的历史,以便按下返回按钮时,并不会让他返回 HTTP 页面。提示使用 location.protocol 获取当前使用的协议如果不是 HTTPS,使用 location.replace()将当前页面替换为 HTTPS 使用 location.href 获取完整的地址,使用 String.prototype.split()将协议部分从

浏览器 - 隐藏元素

2019-11-15 描述隐藏所有指定的元素。提示使用 NodeList.prototype.forEach()让每一个指定的元素都可以设置其样式 display 的值为 none 当然,我们也可以使用 visibility:hidden。其区别如下:visibility:hidden 可以隐藏元素,但该元素在布局中依然占用空间。如果设置了该样式的子元素 visibility 为 visible,那么其子元素可见 disp

浏览器 - 使用 SHA-256 创建一个 hash (advanced)

2019-11-14 描述使用 SHA-256 算法为一个值创建一个 hash,然后返回一个 promise。提示使用 SubtleCryptoAPI 为给定的值创建一个 hashcrypto.subtle 在不安全的上下文中将会返回 undefined 代码 consthashBrowser=val=>crypto.subtle.digest('SHA-256',newTextEncoder('utf-8').encod

浏览器 - 是否包含 class

2019-11-13 描述如果元素有指定的 class 就返回 true,否则返回 false。提示使用 element.classList.contains()来检测元素是否有特定的 classclassList 是替代使用空格进行分隔的字符串 element.className 来访问类的一种更方便的方法虽然 element.classList 为只读属性,但是可以使用 add()和 remove()方法对他进行修改代码 c

浏览器 - 获取样式

2019-11-12 描述为指定的元素返回某个特定的 CSS 值。提示使用 Window.getComputedStyle()获取指定元素的 CSS 值 getComputedStyle 还可以从伪元素中获取样式信息(如:::after,::before,::marker 等)getComputedStyle 的返回值是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身代码 con

浏览器 - 获取滚动位置

2019-11-11 描述返回当前页面的滚从位置。提示如果 pageXOffset 和 pageYOffset 存在就使用他们,否则的话就使用 scrollLeft 和 scrollTop 可以使用 window 来作为参数 el 的默认值代码 constgetScrollPosition=(el=window)=>({x:el.pageXOffset!==undefined?el.pageXOffset:el.scrollL

Vditor v1.9.7 发布,支持标题锚点、语音阅读渲染

v1.9.7 简介该版本主要为 Markdown 的渲染提供了更多的支持和配置。其主要特性如下:支持代码高亮对行号的配置:options.preview.hljs.lineNumber 对选中的文本进行阅读:speechRender 为标题添加了锚点:#163 添加了初始化后的回调方法:options.after 修改静态方法 preview,以支持多次渲染在此感谢 547176052 反馈的 bug 和建议。v1.9.7

浏览器 - 获取图片地址

2019-11-08 描述获取一个元素中的所有图片,并将他们放到一个数组中。提示对提供的元素使用 Element.prototype.getElementsByTagName()方法来获取所有 <img> 元素使用 Array.prototype.map()来获取每一个图片元素中的 src 属性 includeDuplicates 参数的默认值为 false,表示需要过滤掉重复的图片地址创建一个 Set 来移除重复的图片地