iOS Safari 回退导致 alert 失效 我在文章页增加了解析运行 html 和 js 源码的功能。然后发现一个诡异的问题，在手机端 Safari 按回退和前进键会导致 alert 失效。验证了电脑端和手机端各种浏览器，仅手机端 Safari 复现这个问题。 我查到的解释是： alert/confirm/prompt dialogs will not be displayed if the user has navigated back to a pushState location. Once a user has navigated back (at any point), calling alert(…), confirm(…), or prompt(…) will not display dialog boxes. confirm(…) will always return false, and prompt(…) wil... 2024-11-10
重写反调试代码 前端反调试对高手没什么用，但是可以遏制初学者的好奇心，减少麻烦。 我之前写的反调试缝合了多套代码，发现存在诡异的BUG：页面置于后台（非活动标签页）一段时间后有概率会白屏。打开大量页面，即浏览器占用大量资源时会增加出现白屏的概率。不过花了很长时间我也没有准确定位到出问题的代码段，干脆整个废弃重写。 最终我选择的参考代码是 https://github.com/AepKill/devtools-detector。 2024-11-03
全屏事件触发 resize 事件 我之前发现播放视频时进入全屏会闪退。奇怪的是 Chrome 和 Firefox 存在这个问题，但 Safari 正常。正因为如此对我造成了误导，没有找到问题所在。直到今天发现了这个乌龙。 拖动改变浏览器窗口大小时会造成图文排版变形，所以我监听到 resize 事件就会重新渲染页面——表现之一就是视频进入全屏时“闪退”成了非全屏窗口，video 元素被清除了，重新渲染为缩略图 img。 那么解决这个问题就是监听到 resize 事件时增加一个判断是否全屏。 is_fullscreen = () => !!( document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement... 2024-10-25
CleanCSS - 移除未使用的 CSS 代码 应用：CleanCSS 地址：https://dujun.eu.org/cleancss 功能：分析页面中引用的 CSS 文件，打包成单一的干净文件用于替换所有引用 适用：独立页面 一、缘起 我导航站用了开源项目WebStackPage，首次静态资源加载有 1.5M，一部分原因是它使用了第三方库，比如 Bootstrap。当然，第三方库只有少量代码实际被用到，所以我就想找个办法，把未使用的 CSS 代码移除，使得静态文件更小。 二、方案 很快就找到了这个网站https://unused-css.com/。它可以很好地实现我的需求，不过有一个小问题，它是收费的，最低 25 美元一个月。 Only paying users can download clean CSS files. 那怎么办呢？那就自己开发一个工具吧。 三、分析 清理 CSS 代码需要这么几步： 抓取页面 HTML 内容 找到... 2022-10-31
JavaScript 强混淆 我的网站是纯内存缓存读 + js 渲染 spa，现在的瓶颈就是硬件配置低、带宽小，程序架构上可以说追求到极致了。其中，js 渲染是全站性能优化的关键一坏，服务器只负责吐出原始数据，而把路由解析、数据处理、布局渲染的计算压力都转嫁给了浏览器。 如此重要的前端部分我当然花了很大的心思。js 是明文的，只能做混淆。但是如果混淆得足够好，逆向成本过高，也是可以达到很好的代码保护。网上有很多 js 代码混淆的方法可以参考，但有些会让文件大小增加好几倍。这里我分享一下自己 js 强混淆的思路。 我实现 js 强混淆的关键一点就是字面量表达式。 原生写法： str.trim(); 字面量表达式： str['trim'](); 有了这个基础，混淆要做的就是进一步隐藏字符串了。我用了 ASCII 转码和 base64，使得字符基础变量简化为 64 个 base64 编码字符，以及特殊的空格和换行符。 以“我... 2022-10-19
Firefox 不支持 :has 伪类 在 Firefox 下发现一个很诡异的问题，图片缩放时没有弹出层。在 Chrome 和 Safari 下是正常的。 排查发现有一段样式 Firefox 不生效，最终定位是 Firefox 不支持 :has 伪类。 2022-10-04
波浪下划线 本站对文字的重点标记，经过了几次改版。 一、着重号 最初使用着重号。它的问题是会造成段落间距变大，同时大圆点标记过于醒目，抢夺阅读视线。 text-emphasis: filled circle; text-emphasis-position: under; 效果如：对照文字、着重号标记的文字 二、虚线下划线 着重号用了没多久，就改成虚线下划线了。 border-bottom: 2px dotted; 效果如：对照文字、虚线下划线标记的文字 三、波浪下划线 虚线下划线没什么问题，但是今天突然觉得平庸了，决定改成波浪线。 代码参考了 CSS实现文字下面波浪线动画效果。具体实现如下： padding: 5px 0.2em; background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, cu... 2022-08-02
mac系统浏览器，隐藏文本光标（除输入框外）。css 如下： * { caret-color: transparent; } input:focus-within, textarea:focus-within { caret-color: auto; } 应用前效果（录自友站 Vian）： 应用后效果： 2022-06-28
position: sticky 刷到蜻蜓的墓园的博客，时光页面的年月用了元素固定。 我注意到滑动时固定和释放很顺滑，没有拖帧，而这是我的时光页面一直没解决的问题。 当时是参考jquery.pin改写的 js，没错，是jQuery 时代的方法了，原理就是根据可视范围，切换 position 为 fixed、absolute。慢速滑动时效果是完美的，但是快速滑动时就会有拖帧。 我研究了蜻蜓的墓园源码，发现是用 css 新特性 “position: sticky”。改完之后果然顺滑了。实际效果见时光页面 改的过程中遇到个坑，“position: sticky” 的所有祖先元素不能有 “overflow: hidden” 类似属性，否则不生效。 2022-02-05
