当前位置：首页 > JavaScript

js实现书签

2026-04-06 19:55:39JavaScript

使用JavaScript创建书签

在JavaScript中创建书签可以通过两种方式实现：一种是手动创建书签小工具（Bookmarklet），另一种是通过代码动态生成书签。以下是具体方法：

手动创建书签小工具（Bookmarklet）

编写JavaScript代码
书签小工具是一段以javascript:开头的URL。例如，以下代码会在当前页面弹出一个对话框：
```
javascript:alert('Hello, Bookmarklet!');
```
创建书签
在浏览器中新建一个书签，将上述代码粘贴到书签的URL字段中。保存后，点击该书签即可执行代码。
复杂代码的处理
如果代码较长，可以将其压缩为一行，并确保所有分号正确。例如：
```
javascript:(function(){document.body.style.backgroundColor='lightblue';})();
```

动态生成书签

通过JavaScript代码动态创建书签链接，并添加到页面中：

创建书签链接元素
使用document.createElement创建一个<a>标签，并设置其href属性为书签小工具的代码。

js实现书签

const bookmarklet = document.createElement('a');
bookmarklet.href = "javascript:alert('Dynamic Bookmarklet!');";
bookmarklet.textContent = 'Click Me';
document.body.appendChild(bookmarklet);

添加样式或交互
可以为书签链接添加CSS样式或事件监听器，增强用户体验。

bookmarklet.style.color = 'blue';
bookmarklet.addEventListener('click', () => {
    console.log('Bookmarklet clicked');
});

实际应用示例

以下是一个实用的书签小工具代码，用于提取当前页面的所有链接：

javascript:(function(){
    const links = document.getElementsByTagName('a');
    let result = '';
    for (let i = 0; i < links.length; i++) {
        result += links[i].href + '\n';
    }
    prompt('Page Links:', result);
})();

将此代码保存为书签后，点击它会弹出一个对话框，显示当前页面的所有链接。