在Google阅读器中，我们可以使用书签来"注释"我们正在访问的页面。当我们按下书签时，当前页面顶部会显示一个小的Google表单。在表单中，我们可以输入描述，等等。当我们按下Submit时，表单将自己提交而不离开页面，然后表单消失。总而言之，非常流畅的体验。

我显然试图看一下它是如何完成的，但是最有趣的部分却被缩小并且不可读。所以...

关于如何实现这样的想法(在浏览器端)？有什么问题？现有的博客文章对此有何描述？

解决方案

回答

从最基本的角度来看，它将使用" createElement"创建要插入到页面中的元素，并使用" appendChild"或者" insertBefore"将它们插入到页面中。

回答

我们可以使用简单的书签添加一个<script>标记，该标记加载一个外部JavaScript文件，该文件可以将必要的元素推送到DOM并向用户显示模式窗口。该表单是通过AJAX请求提交的，它是在服务器端处理的，并成功返回或者返回用户需要更正的错误列表。

因此，bookmarklet如下所示：

javascript：code-to-add-script-tag-and-init-the-script;

外部脚本将包括：

• 向DOM添加元素的能力
• 能够将该元素的innerHTML更新为我们要为用户显示的标记
• AJAX表单处理的处理

窗口效果可以通过CSS定位来实现。

至于完成这项特定任务的完整资源，我们将很幸运找到任何东西。但是，看看较小的单个部分，我们会发现很多资源。环顾四周，以获取有关模态窗口，向DOM中添加元素以及AJAX处理的信息。

回答

Aupajo正确。但是，我将向我们介绍我为我们的网站(www.iminta.com)设计的书签框架。

小书签本身的内容如下：

javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());document.body.appendChild(e)})())

这只是向包含此文件的文档中注入一个新脚本：

http://www.iminta.com/javascripts/new_bookmarklet.js

重要的是要注意，小书签创建了一个iframe，对其进行了定位，并向文档中添加了事件，以使用户可以执行诸如逃逸(关闭窗口)或者滚动(使其保持可见)之类的操作。它还会隐藏在z定位中效果不佳的元素(例如Flash)。最后，它有助于与iframe中正在运行的javascript通信。这样，我们可以在iframe中有一个关闭按钮，告诉父文档删除iframe。这种跨域的东西有点古怪，但这是(见过的)唯一的方法。

不是为了the弱；如果我们不擅长JavaScript，请做好准备。