添加到收藏夹按钮用于添加收藏的 html 页面

Question

我正在创建一个移动网站，其中包含特定月份的不同事件。我想在每个事件页面上添加一个按钮，让用户添加不同的“收藏夹”。我希望当用户单击“添加到收藏夹”按钮时，该事件应自动添加到 html 页面“收藏夹”

Answer 1

我会使用一个小的 javascript，外部并在事件页面上调用（因为会有很多实例）。这实际上是您询问的一个非常简单的过程。

• 创建一个名为 favorites.js 的新 javascript 文件
• 使用此代码保存：

修改为支持 Opera

    function bookmark(title,url){

    var sPath = window.location.pathname;

    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

    url =url+sPage;

    if (window.sidebar) // firefox

    window.sidebar.addPanel(title, url, "");

    else if(window.opera && window.print){ // opera

    var elem = document.createElement('a');

    elem.setAttribute('href',url);

    elem.setAttribute('title',title);

    elem.setAttribute('rel','sidebar');

    elem.click();

    }

    else if(document.all)// ie

    window.external.AddFavorite(url, title);

}

• 在你编写的每个 HTML 文档的头部，你需要调用这个脚本（非常类似于调用 CSS 定义）：

  <script src="**/dir/**favorites.js" charset="UTF-8" type="text/javascript" defer/></script>

Defer 是可选的，但建议使用这样的脚本，这对于页面的运行不是必需的。但是，如果您希望用户可以在页面的其余部分加载之前使用添加到书签功能，您可以将 defer 更改为 async。 p>

现在你快到了。在这一点上，为了避免一些挫折，在尝试使用链接之前确保您的页面加载没有错误。这将确保您的 javascript 或现有代码没有错误。

• 要使用添加到收藏夹按钮，就像使用锚点和链接一样简单。一个特别会使用这个脚本的链接看起来像这样：

  <a href="javascript:bookmark()">bookmark me</a>

或

<a href="javascript:bookmark()"><img src="imgs/bookmarklogo.png" **other-img-definition-stuff**></a>

在过去，使用表单按钮很常见，如下所示：

<input type="button" name="Bookmark this page" onclick="bookmark()" />

---

自从我真正为 HTML/CSS 烦恼以来已经过去了好几年，在那个时候，出现了诸如 AddThis 之类的选项。如果你觉得这个任务太难了，我会去做这样的事情。我还建议不要使用手工编码，转而使用某种 CMS，例如 Drupal 或 Wordpress。特别是如果您的日程安排很紧。