2

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

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

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

4

3 回答 3

3

奥帕霍说得对。但是，我将向您介绍我为我们的网站 ( 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，请准备好奋斗。

于 2008-09-16T00:06:00.380 回答
0

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

于 2008-09-15T23:20:59.523 回答
0

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

所以小书签看起来像：

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

外部脚本将包括：

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

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

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

于 2008-09-15T23:26:15.797 回答