轶哥

📚 Having fun with AI Agent. Always learning.

CDN加载失败自动切换为加载本地静态资源
  •   更新:2023-04-30 23:50:01
  •   首发:2023-04-30 23:50:01
  •   html5
  •   911

在Web开发中,我们通常使用CDN(内容分发网络)来加速网站的静态资源(如CSS和JavaScript文件)加载。然而,CDN有时可能会失效,导致网站加载速度变慢或者无法正常运行。本文将介绍一种优化方案,当HTML中引入的style或JavaScript静态资源CDN失效时,自动切换为加载本地js/css。我们还将介绍一个名为 "CDN to Local Fallback for HTML Files" 的VSCode插件的开发和测试过程,以帮助您更轻松地实现这个方案。

前端静态资源CDN加载失败的优化方案

要实现这个优化方案,我们需要在HTML文件中添加一个特殊的<script>标签,当CDN资源加载失败时,该脚本将自动切换到使用本地资源。具体实现方法如下:

  1. 遍历HTML文件中所有引用外部CSS和JavaScript资源的<link><script>标签。
  2. 下载这些标签所指向的CDN资源,并将其保存到本地目录。
  3. 在每个<link><script>标签中添加一个onerror属性,该属性指向一个名为loadFallbackResource的函数。
  4. 在HTML文件中添加一个<script>标签,该标签包含loadFallbackResource函数的实现,以及一个在页面加载完成后遍历所有带有onerror属性的元素并调用loadFallbackResource的事件监听器。
Office表格转HTML Table
  •   更新:2023-03-12 10:55:03
  •   首发:2022-08-22 22:50:13
  •   html5
  •   2185

这个程序大约写于5年前,在3年前开源。这是一篇3年前就应该写的文章,一直沉睡在TODO List,由于优先级过低,竟然拖到今天才写。

office2table.png

这个小工具诞生的原因背景:

Office的Excel是目前最优秀的表格工具,Office三套件经久不衰,无疑是职场最具影响力的生产力软件。而World与Excel中的表格直接复制到网页(HTML组件)中会遗留非常多的额外标签,这些标签在浏览器中有的是无法识别的,有的是能识别但是会出现显示异常的。

在Web2.0时代,出现了“所见即所得”的HTML富文本编辑器。与此同时,Web前端飞速发展,出现了多种自适应布局方式,可以让Web页面兼容不同大小和分辨率的显示器。

由于Office新版协议采用了和HTML类似的标记语言来表达富文本内容,使得WPS等第三方Office软件得以在不破解协议的情况下修改Office文件。然而World、Excel和PowerPoint的表格内容直接复制出来粘贴到HTML富文本编辑器是可以使用的,但是多余的标签会衍生出各种问题。

这个 Office Table 转 HTML Table 就是为了解决此问题开发的纯前段处理数据的Web小程序。

iframe显示特定内容
  •   更新:2020-09-26 21:49:55
  •   首发:2020-08-25 13:54:46
  •   html5
  •   5015

iframe控制显示范围,显示目标网页的特定区域,这对于特定场景非常有用,是一种简单高效的系统整合方案。

在新版本的浏览器中,vspacehspace已经失效了。因此iframe显示特定内容只能采取嵌套iframe的方案。

例如,控制iframe仅显示https://www.wyr.me的头像部分。

PHP连接数据库进行增删查改-PDO方法-以MySQL为例
  •   更新:2017-05-03 17:51:21
  •   首发:2015-11-28 13:50:46
  •   html5
  •   10939

  由于PHP6中将默认以PDO方法连接数据库,而PDO方法优点很多,因此此文仅介绍PDO方法连接数据库进行操作。需要注意,从 PHP 5.1 开始附带了 PDO,在 PHP 5.0 中是作为一个 PECL 扩展使用,在生产环境中强烈建议升级到PHP5.4+版本。

PDO操作数据库的主要优点
  • 支持多种数据库(只要提供正确的数据源,其它的数据库操作是一样的)。
  • 开发效率更高,便于移植。
  • 对事务处理支持更好,特别是事务回滚。
  • 更为安全。
  上一页 下一页