In Google Reader, you can use a bookmarklet to "note" a page you're visiting. When you press the bookmarklet, a little Google form is displayed on top of the current page. In the form you can enter a description, etc. When you press Submit, the form submits itself without leaving the page, and then the form disappears. All in all, a very smooth experience.
在Google阅读器中,您可以使用书签来“记录”您正在访问的页面。当您按下书签时,当前页面顶部会显示一个小的Google表单。在表单中,您可以输入说明等。当您按提交时,表单提交自己而不离开页面,然后表单消失。总而言之,这是一次非常流畅的体验。
I obviously tried to take a look at how it's done, but the most interesting parts are minified and unreadable. So...
我显然试着看一下它是如何完成的,但最有趣的部分是缩小和不可读的。所以...
Any ideas on how to implement something like this (on the browser side)? What issues are there? Existing blog posts describing this?
关于如何实现这样的事情的任何想法(在浏览器端)?有什么问题?现有博客帖子描述了这个?
3 个解决方案
#1
3
Aupajo has it right. I will, however, point you towards a bookmarklet framework I worked up for our site (www.iminta.com).
Aupajo没错。但是,我会指出你为我们的网站(www.iminta.com)工作的bookmarklet框架。
The bookmarklet itself reads as follows:
书签本身如下:
javascript:void((function(){var%20e=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)})())
This just injects a new script into the document that includes this file:
这只是在包含此文件的文档中注入一个新脚本:
http://www.iminta.com/javascripts/new_bookmarklet.js
It's important to note that the bookmarklet creates an iframe, positions it, and adds events to the document to allow the user to do things like hit escape (to close the window) or to scroll (so it stays visible). It also hides elements that don't play well with z-positioning (flash, for example). Finally, it facilitates communicating across to the javascript that is running within the iframe. In this way, you can have a close button in the iframe that tells the parent document to remove the iframe. This kind of cross-domain stuff is a bit hacky, but it's the only way (I've seen) to do it.
重要的是要注意,bookmarklet创建一个iframe,定位它,并向文档添加事件,以允许用户执行诸如命中转义(关闭窗口)或滚动(因此它保持可见)之类的事情。它还隐藏了与z-positioning不兼容的元素(例如flash)。最后,它有助于与iframe中运行的javascript进行通信。通过这种方式,您可以在iframe中有一个关闭按钮,告诉父文档删除iframe。这种跨域的东西有点hacky,但这是(我见过)这样做的唯一方法。
Not for the feint of heart; if you're not good at JavaScript, prepare to struggle.
不是为了佯装;如果你不擅长JavaScript,那就准备好了。
#2
0
At it's very basic level it will be using createElement to create the elements to insert into the page and appendChild or insertBefore to insert them into the page.
在它的基本级别,它将使用createElement创建要插入页面的元素,并使用appendChild或insertBefore将它们插入到页面中。
#3
0
You can use a simple bookmarklet to add a <script> tag which loads an external JavaScript file that can push the necessary elements to the DOM and present a modal window to the user. The form is submitted via an AJAX request, it's processed server-side, and returns with success or a list of errors the user needs to correct.
您可以使用一个简单的书签来添加一个
So the bookmarklet would look like:
所以bookmarklet看起来像:
javascript:code-to-add-script-tag-and-init-the-script;
The external script would include:
外部脚本包括:
- The ability to add an element to the DOM
- The ability to update innerHTML of that element to be the markup you want to display for the user
- Handling for the AJAX form processing
向DOM添加元素的能力
能够将该元素的innerHTML更新为您要为用户显示的标记
处理AJAX表单处理
The window effect can be achieved with CSS positioning.
使用CSS定位可以实现窗口效果。
As for one complete resource for this specific task, you'd be pretty lucky to find anything. But have a look at the smaller, individual parts and you'll find plenty of resources. Have a look around for information on modal windows, adding elements to the DOM, and AJAX processing.
至于这个特定任务的一个完整资源,你很幸运能找到任何东西。但是看看较小的单个部件,你会发现很多资源。浏览有关模态窗口,向DOM添加元素以及AJAX处理的信息。
#1
3
Aupajo has it right. I will, however, point you towards a bookmarklet framework I worked up for our site (www.iminta.com).
Aupajo没错。但是,我会指出你为我们的网站(www.iminta.com)工作的bookmarklet框架。
The bookmarklet itself reads as follows:
书签本身如下:
javascript:void((function(){var%20e=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)})())
This just injects a new script into the document that includes this file:
这只是在包含此文件的文档中注入一个新脚本:
http://www.iminta.com/javascripts/new_bookmarklet.js
It's important to note that the bookmarklet creates an iframe, positions it, and adds events to the document to allow the user to do things like hit escape (to close the window) or to scroll (so it stays visible). It also hides elements that don't play well with z-positioning (flash, for example). Finally, it facilitates communicating across to the javascript that is running within the iframe. In this way, you can have a close button in the iframe that tells the parent document to remove the iframe. This kind of cross-domain stuff is a bit hacky, but it's the only way (I've seen) to do it.
重要的是要注意,bookmarklet创建一个iframe,定位它,并向文档添加事件,以允许用户执行诸如命中转义(关闭窗口)或滚动(因此它保持可见)之类的事情。它还隐藏了与z-positioning不兼容的元素(例如flash)。最后,它有助于与iframe中运行的javascript进行通信。通过这种方式,您可以在iframe中有一个关闭按钮,告诉父文档删除iframe。这种跨域的东西有点hacky,但这是(我见过)这样做的唯一方法。
Not for the feint of heart; if you're not good at JavaScript, prepare to struggle.
不是为了佯装;如果你不擅长JavaScript,那就准备好了。
#2
0
At it's very basic level it will be using createElement to create the elements to insert into the page and appendChild or insertBefore to insert them into the page.
在它的基本级别,它将使用createElement创建要插入页面的元素,并使用appendChild或insertBefore将它们插入到页面中。
#3
0
You can use a simple bookmarklet to add a <script> tag which loads an external JavaScript file that can push the necessary elements to the DOM and present a modal window to the user. The form is submitted via an AJAX request, it's processed server-side, and returns with success or a list of errors the user needs to correct.
您可以使用一个简单的书签来添加一个
So the bookmarklet would look like:
所以bookmarklet看起来像:
javascript:code-to-add-script-tag-and-init-the-script;
The external script would include:
外部脚本包括:
- The ability to add an element to the DOM
- The ability to update innerHTML of that element to be the markup you want to display for the user
- Handling for the AJAX form processing
向DOM添加元素的能力
能够将该元素的innerHTML更新为您要为用户显示的标记
处理AJAX表单处理
The window effect can be achieved with CSS positioning.
使用CSS定位可以实现窗口效果。
As for one complete resource for this specific task, you'd be pretty lucky to find anything. But have a look at the smaller, individual parts and you'll find plenty of resources. Have a look around for information on modal windows, adding elements to the DOM, and AJAX processing.
至于这个特定任务的一个完整资源,你很幸运能找到任何东西。但是看看较小的单个部件,你会发现很多资源。浏览有关模态窗口,向DOM添加元素以及AJAX处理的信息。