提问人: 提问时间:9/16/2008 最后编辑:5 revs, 2 users 100%jplindstrom 更新时间:9/22/2020 访问量:837
如何使用书签(如Google Reader中的Note)在任何网站的页面中显示表单?
How to display a form in any site's pages using a bookmarklet (like Note in Google Reader)?
问:
在 Google 阅读器中,您可以使用书签来“记下”您正在访问的网页。当您按下书签时,当前页面顶部会显示一个小的 Google 表单。在表单中,您可以输入描述等。当您按“提交”时,表单将在不离开页面的情况下自行提交,然后表单将消失。总而言之,这是一次非常流畅的体验。
我显然试图看看它是如何完成的,但最有趣的部分是缩小的,不可读。所以。。。
关于如何实现这样的东西(在浏览器端)的任何想法?存在哪些问题?现有的博客文章对此进行了描述?
答:
在非常基本的级别上,它将用于创建要插入到页面中的元素,或者将它们插入到页面中。createElement
appendChild
insertBefore
您可以使用一个简单的书签来添加一个 <script> 标签,该标签加载一个外部 JavaScript 文件,该文件可以将必要的元素推送到 DOM 并向用户呈现模式窗口。表单通过 AJAX 请求提交,在服务器端进行处理,并返回成功或用户需要更正的错误列表。
因此,书签将如下所示:
javascript:code-to-add-script-tag-and-init-the-script;
外部脚本将包括:
- 向 DOM 添加元素的能力
- 能够将该元素的 innerHTML 更新为要为用户显示的标记
- AJAX 表单处理的处理
窗口效果可以通过CSS定位来实现。
至于这个特定任务的一个完整资源,你会很幸运能找到任何东西。但是,看看较小的单个部分,您会发现大量资源。环顾四周,了解有关模式窗口、向 DOM 添加元素和 AJAX 处理的信息。
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,那就做好奋斗的准备。
评论