如何使用书签(如Google Reader中的Note)在任何网站的页面中显示表单?

How to display a form in any site's pages using a bookmarklet (like Note in Google Reader)?

提问人: 提问时间:9/16/2008 最后编辑:5 revs, 2 users 100%jplindstrom 更新时间:9/22/2020 访问量:837

问:

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

我显然试图看看它是如何完成的,但最有趣的部分是缩小的,不可读。所以。。。

关于如何实现这样的东西(在浏览器端)的任何想法?存在哪些问题?现有的博客文章对此进行了描述?

JavaScript 客户端 书签 浏览器

评论


答:

0赞 Sam Hasler 9/16/2008 #1

在非常基本的级别上,它将用于创建要插入到页面中的元素,或者将它们插入到页面中。createElementappendChildinsertBefore

0赞 Aupajo 9/16/2008 #2

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

因此,书签将如下所示:

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

外部脚本将包括:

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

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

至于这个特定任务的一个完整资源,你会很幸运能找到任何东西。但是,看看较小的单个部分,您会发现大量资源。环顾四周,了解有关模式窗口、向 DOM 添加元素和 AJAX 处理的信息。

3赞 Anutron 9/16/2008 #3

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,对其进行定位,并将事件添加到文档中,以允许用户执行诸如按 Esc 键(关闭窗口)或滚动(使其保持可见)等操作。它还隐藏了不适合 z 定位的元素(例如闪光灯)。最后,它有助于与在 iframe 中运行的 javascript 进行通信。这样,您可以在 iframe 中设置一个关闭按钮,告诉父文档删除 iframe。这种跨域的东西有点骇人听闻,但这是(我见过的)唯一的方法。

不是为了佯攻;如果你不擅长 JavaScript,那就做好奋斗的准备。

评论

0赞 jplindstrom 9/16/2008
谢谢,这是一个很好的答案,处理 z-index 和删除闪存(我遇到了问题),以及我一开始没有意识到我需要的 iframe。我看到你也使用内联 css,这是我遇到的其他问题。