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

Posted 2023-02-22

【中文标题】如何使用书签在任何网站的页面中显示表单（如 Google Reader 中的 Note）？

【英文标题】：How to display a form in any site's pages using a bookmarklet (like Note in Google Reader)?

【发布时间】：2010-09-09 05:22:24

【问题描述】：

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

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

关于如何实现这样的东西（在浏览器端）的任何想法？有哪些问题？描述此内容的现有博客文章？

【参考方案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)
)())

这只是将一个新脚本注入到包含该文件的文档中：

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

请务必注意，小书签会创建一个 iframe、定位它并向文档添加事件，以允许用户执行诸如点击转义（关闭窗口）或滚动（使其保持可见）之类的操作。它还隐藏了不能很好地使用 z 定位的元素（例如，闪光灯）。最后，它有助于与 iframe 中运行的 javascript 进行通信。这样，您可以在 iframe 中有一个关闭按钮，告诉父文档删除 iframe。这种跨域的东西有点hacky，但这是唯一的方法（我见过）。

不是为了装腔作势；如果你不擅长 JavaScript，那就准备好奋斗吧。

【讨论】：

谢谢，这是一个很好的答案，处理 z-index 和删除 flash（我遇到了问题），以及我一开始没有意识到我需要的 iframe。我看到你也使用内联 css，这是我遇到的其他问题。

【参考方案2】：

在最基本的层面上，它将使用createElement 创建要插入页面的元素，并使用appendChild 或insertBefore 将它们插入页面。

【参考方案3】：

您可以使用一个简单的书签添加一个

所以小书签看起来像：

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

外部脚本将包括：

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

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

至于这个特定任务的完整资源，你很幸运能找到任何东西。但是看看更小、更独立的部分，你会发现很多资源。查看有关模式窗口、向 DOM 添加元素和 AJAX 处理的信息。