javascript - 如何使用小书签(如 Google 阅读器中的 Note)在任何站点的页面中显示表单？

Question

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

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

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

Answer 1

Aupajo 说得对。但是，我会向您指出我为我们的网站 ( www.iminta.com ) 开发的书签框架。

小书签本身内容如下:

javascript:void((function(){
    var e=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)
})())

这只是将一个新脚本注入(inject)到包含此文件的文档中:

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

请务必注意，小书签会创建一个 iframe，对其进行定位，并将事件添加到文档中，以允许用户执行诸如点击退出(关闭窗口)或滚动(使其保持可见)之类的操作。它还隐藏了不适合 z 定位的元素(例如 flash)。最后，它有助于与在 iframe 中运行的 javascript 进行通信。这样，您可以在 iframe 中有一个关闭按钮，告诉父文档删除 iframe。这种跨域的东西有点老套，但这是(我见过的)唯一的方法。

不是为了虚心；如果您不擅长 JavaScript，请准备好奋斗。