如何使用书签（如 Google Reader 中的注释）在任何网站的页面中显示表单？

Question

在 Google 阅读器中，您可以使用小书签来“记下”您正在访问的页面。当您按下小书签时，当前页面顶部会显示一个小的 Google 表单。在表单中您可以输入描述等。当您按“提交”时，表单会自行提交而不会离开页面，然后表单就会消失。总而言之，这是一次非常流畅的体验。

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

关于如何实现这样的事情（在浏览器端）有什么想法吗？存在哪些问题？现有的博客文章对此进行了描述吗？

Answer 1

奥帕霍说得对。不过，我将向您介绍我为我们的网站 (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 定位效果不佳的元素（例如，闪光灯）。最后，它有助于与 iframe 中运行的 javascript 进行通信。这样，您就可以在 iframe 中添加一个关闭按钮，告诉父文档删除 iframe。这种跨域的东西有点hacky，但这是（我见过的）唯一的方法。

不是为了假装心动；如果你不擅长 JavaScript，那就做好挣扎的准备吧。

Answer 2

在非常基础的层面上它将使用 createElement 创建要插入页面的元素并 appendChild 或者 insertBefore 将它们插入到页面中。

Answer 3

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

所以小书签看起来像：

javascript:添加脚本标签和初始化脚本的代码；

外部脚本将包括：

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

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

至于针对此特定任务的完整资源，您会很幸运地找到任何东西。但看看更小的、单独的部分，你会发现大量的资源。查看有关模式窗口、向 DOM 添加元素以及 AJAX 处理的信息。