深入浅出`javascript:`协议：历史、原理与现代前端的替代方案372

好的，各位前端探索者们！今天，我们不聊最新的框架，不谈酷炫的特效，而是要一起穿越回Web开发的“史前时代”，探秘一个你可能见过、却不甚了解的“老物件”——`javascript:`协议。它曾是前端灵活性的象征，如今却是安全警示的代名词。
---

哈喽，各位前端爱好者！我是你们的中文知识博主。你是否在一些古老的网站链接、或者在浏览器的地址栏里偶然看到过这样一串字符：`javascript:alert('Hello World!');`？是不是有点好奇，这玩意儿是啥？它既不像`http:`那样指向一个网页，也不像`ftp:`那样指向文件传输。今天，我们就来揭开`javascript:`协议的神秘面纱，一探究竟它的来龙去脉、工作原理，以及为什么在现代前端开发中，我们几乎不再使用它。

首先，让我们明确一下，这里的“`标签`”并非指HTML的``元素，也不是JavaScript中的`label`语句（用于`break`或`continue`到特定循环），而是指URI（统一资源标识符）中的“scheme”（方案/协议）部分。就像`http:`、`https:`、`ftp:`、`mailto:`一样，`javascript:`也是一个合法的URI scheme。它的特殊之处在于，它不指向一个外部资源，而是指示浏览器执行紧随其冒号之后的JavaScript代码。

`javascript:`协议的诞生与辉煌：书签小工具的黄金时代

在互联网的早期，浏览器功能相对简陋，与页面交互的方式也比较有限。为了增强用户体验和页面的动态性，Netscape（网景）公司在JavaScript被发明之后，引入了`javascript:`协议。它的核心思想是：当用户点击一个以`javascript:`开头的链接，或者在地址栏输入这样的URL并回车时，浏览器会解析并执行这串JavaScript代码，而不是尝试加载一个新页面。

这种特性催生了一个非常流行的应用场景——“书签小工具”（Bookmarklets）。书签小工具本质上就是一段JavaScript代码，它被保存为一个书签。当用户点击这个书签时，代码就会在当前浏览的页面上下文中执行。想想看，在那个没有浏览器插件商店的年代，书签小工具简直是“神器”！

举个例子，你可以创建一个书签，其URL内容是：
javascript:(function(){='lightblue';})();
当你浏览任何一个网页时，点击这个书签，页面的背景色就会变成浅蓝色。再比如，一个用于提取页面所有链接的书签小工具：
javascript:(function(){var links=('a');var result='';for(var i=0;i { (); myFunction(); });` 这样`href`就可以指向一个实际的备用URL（如果JavaScript失败的话），或者直接不设置`href`。