---
title: "兼容的加入收藏"
url: "https://yjyj.net/css/1562.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2010-08-21T19:18:45+08:00"
updated_at: "2010-09-14T04:17:10+08:00"
categories: "前端杂烩"
tags: "JavaScript交互, 前端开发实战, 服务器安全, 网页视觉设计"
summary: "这篇文章专门解决“网页里怎么兼容性地加入收藏”这个老问题，给出基于浏览器特性的判断写法：IE、Firefox、Opera分别走不同分支，点击“加入收藏”即可触发对应收藏逻辑。适合前端老项目维护与兼容性理解。"
source: "生猛大蝦 (https://yjyj.net)"
---

# 兼容的加入收藏

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/css/1562.html) · 作者：小 虾 · 发布时间：2010-08-21

## 30 秒核心看点 (TL;DR)

- 用 JavaScript 判断浏览器能力，再分别调用收藏相关接口。
- IE、Firefox、Opera 的处理方式不同，核心是做兼容分支。
- 实操上可直接把链接做成“加入收藏”，但现代浏览器支持有限。

<script type="text/javascript">   
    function addBookmark(title,url) {    
        if( document.all ) {    
            window.external.AddFavorite( url, title);    
        } else if (window.sidebar) {    
            window.sidebar.addPanel(title, url,"");    
        } else if( window.opera && window.print ) {    
            return true;    
        }    
    }    
</script>    
<a href="javascript:addBookmark('站点名称,'https://yjyj.net/');">加入收藏</a>

## 延伸问答与排错指南 (FAQ)

### 这段加入收藏代码适合哪些浏览器？
原文代码按浏览器特性分支处理：IE 走 external.AddFavorite，Firefox 走 sidebar.addPanel，Opera 则返回 true。它体现的是早期前端兼容思路，适合理解老项目里的收藏功能写法。

### 为什么点击加入收藏有时没反应？
因为不同浏览器对“加入收藏”接口支持不一致，甚至很多现代浏览器已不再开放这类脚本调用。遇到没反应时，通常不是代码写错，而是浏览器本身限制了自动加入收藏。

### 现在还值得在网站里做加入收藏吗？
如果是老站或历史项目，可以保留兼容写法；但从实际体验看，现代浏览器对脚本直接收藏的支持很弱。更稳妥的做法是引导用户使用浏览器自带收藏功能，而不是依赖脚本强制触发。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)