书签添加 javascript

原创

mob649e816a77bf 2023-11-20 15:31:18 ©著作权

文章标签 搜索夜间模式自动填充 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e816a77bf的原创作品，请联系作者获取转载授权，否则将追究法律责任

书签添加 JavaScript

1. 简介

书签是浏览器提供的一种快速访问网页的方式，通过将书签添加到浏览器的书签栏或书签管理器中，用户可以以一键的方式访问常用的网页。除了常规的网址，书签还可以添加一些 JavaScript 代码，通过这些代码可以实现一些自定义的功能和扩展。

本文将介绍如何使用 JavaScript 代码将书签添加到浏览器，并提供一些示例代码来演示如何使用书签中的 JavaScript 实现一些常见的功能。

2. 如何添加书签

在浏览器中添加书签非常简单，只需要在浏览器地址栏中输入网址，并将其拖拽到书签栏或书签管理器中即可。这样就创建了一个普通的书签，点击书签时会直接跳转到指定的网址。

要添加 JavaScript 代码到书签中，只需要将代码作为网址的一部分，并将其添加到书签中。下面是一个例子：

[书签名称](javascript:alert('Hello, world!'))

这个书签的名称是 书签名称，当点击这个书签时会弹出一个对话框显示 Hello, world!。

3. 使用书签中的 JavaScript

书签中的 JavaScript 代码可以实现很多有趣的功能。下面是一些常见的示例代码，演示了如何使用书签中的 JavaScript 实现这些功能。

3.1 快速搜索

我们可以将搜索引擎的搜索功能添加到书签中，这样就可以快速地进行搜索。下面是一个将 Google 搜索添加到书签的例子：

[Google 搜索](javascript:(function(){var query = prompt("Enter your search query:");if (query) {window.location.href = " + encodeURIComponent(query);}})();)

当点击这个书签时，会弹出一个对话框要求输入搜索关键字，输入后会直接跳转到 Google 搜索结果页面。

3.2 一键切换夜间模式

夜间模式在现代网站中越来越常见，我们可以使用 JavaScript 将网页的样式切换为夜间模式。下面是一个将网页切换为夜间模式的示例代码：

[夜间模式](javascript:(function(){var style = document.createElement('style');style.textContent = 'body {background-color: #000; color: #fff;}';document.head.appendChild(style);})();)

当点击这个书签时，会将当前网页的背景颜色设置为黑色，文字颜色设置为白色，实现夜间模式的切换。

3.3 自动填充表单

有些网站的登录页面可能没有记住密码的选项，我们可以使用 JavaScript 代码来自动填充表单。下面是一个将用户名和密码自动填充到表单的示例代码：

[自动填充表单](javascript:(function(){document.getElementById('username').value = 'your_username';document.getElementById('password').value = 'your_password';})();)

当点击这个书签时，会将用户名和密码自动填充到对应的表单输入框中。