Crossbrowser bookmarks for arbitrary page space

Introduction

There are cases when the browser has to read a large text in several steps. This may be a novel, article or technical guide. Well, when the document is divided into chapters and equipped with easy navigation. Then, interrupting the reading, you can create a temporary bookmark on the section page or on the anchor point in the document. And if the text is solid? Or links to internal sections are not provided? Or are the sections themselves too large and it is difficult then to search for the necessary paragraph inside the section?

One way out is to save the document to disk and read it with the help of any program that allows you to create internal bookmarks or to remember the place where the text was closed.

But such multiplication of entities is not convenient for everyone. Let's try to find a simpler way.
')
In order for this method to be universal, it is necessary to focus not on the structure of the document (it may not contain any tags at all except body and, maybe, pre ) and not on text content (there may be duplicate lines in the text or the document may be a collection of unsigned pictures). It remains to focus on the most fragile - on the metric. Namely - the distance scrolled from the beginning of the document (pages with horizontal scrolling are rare and while they can be neglected).

There is an algorithm: we need to get the distance from the beginning of the document to the place of reading and save it somewhere, then to request to scroll the page to the desired section. To do this, you need: a cross-browser way to determine the scroll distance, a cross-browser repository for the bookmark database and a cross-browser interface to save and restore positions in the document (the algorithm can also be used for server solutions, but we are still interested in the client side).

The algorithm will have at least two minuses: binding to the size of the browser window (although users are unlikely to change this size often; in addition, there is an idea how to minimize this dependency) and support only static documents (use, for example, for the often changing friends page in LJ or for the news feed does not work).

1. Scroll definition

Since Internet Explorer does not support the window.scrollY and window.pageYOffset , we will use element.scrollTop . Which element to take depends on the mode of the browser, that is, on the doctype page. In the following mode (standards mode) you need to use document.documentElement.scrollTop , in the compatibility mode (quirks mode) - document.body.scrollTop . Fortunately, we don’t need to check the mode: the scrollTop property of the wrongly selected element will always be zero during any scrolling, so you can simply iterate over both elements and save a nonzero value.

2. Bookmark Storage

The only cross-browser storage method that seems convenient is Web Storage technology. It is supported by all the latest versions of popular browsers (Chrome 4+, Firefox 3.5+, Internet Explorer 8+, Opera 10.5+, Safari 4+). Reluctantly say goodbye to the support of old versions. The only drawback: not all browsers support this technology for local files. Since the functions of the localStorage object create and request data in the database, focusing on page domains, and all local files (that is, pages loaded using the file:/// protocol) do not have a domain, there is a difficulty with which not all browsers have coped until now . Chrome, Opera and Safari support localStorage technology for offline documents, creating a common keystore for all local files. Internet Explorer gives an error, not finding the localStorage object for documents without a domain. Firefox is generally silent in a partisan manner and does nothing at the places where the functions are called (the bug is recorded here and here ). Therefore, for the last two browsers, the only way is to read online or from the browser cache.

For each page we are interested in, we will create in the database a unique key consisting of an arbitrary prefix and the full URL of the document. So bookmarks will be automatically correlated with their objects and can be saved and requested by two miniature universal functions.

3. Interface

To date, there seems to be no general way to create extensions for all browsers. Therefore, we still have an old proven path - bookmarklets .

We connect components

Let's create a code for three functions: the first one will get the scroll distance and save it in the database, the second one will restore the page scrolling, the third one will delete the bookmark from the base (this is an optional increase).

Scroll save code (create bookmark):

  localStorage ['bm_' + document.location.href] =
     document.documentElement.scrollTop ||  document.body.scrollTop; 

Scroll recovery code (go to tab):

  window.scrollTo (0, localStorage ['bm_' + document.location.href] || 0); 

Bookmark removal code:

  localStorage.removeItem ('bm_' + document.location.href); 

When we remove the spaces (we had to leave the pair, otherwise pieces of long lines disappear beyond the topic borders) and, following the rules, we wrap the code in anonymous functions that do not return values, we get the following bookmarklets:

Scroll save code (create bookmark):

  javascript: (function () {localStorage ['bm _' + document.location.href] = document.documentElement.scrollTop || document.body.scrollTop}) () 

Scroll recovery code (go to tab):

  javascript: (function () {window.scrollTo (0, localStorage ['bm _' + document.location.href] || 0)})) () 

Bookmark removal code:

  javascript: (function () {localStorage.removeItem ('bm _' + document.location.href)}) () 

Unfortunately, Habrahabr filters do not allow inserting links with bookmarklet code: for security reasons, the name of the javascript protocol is substituted. Therefore, it remains to create three bookmarks from scratch and enter the function code instead of the address.

If it seems inconvenient to someone, you can drag the links from here (in Internet Explorer it is better to act through the context menu of the links, adding them to the desired Favorite folder, because dragging booklets does not always work).

Of course, these rudiments of functions can be developed by means of each browser. You can use GreaseMonkey or Custom Buttons for Firefox (or create a full extension), you can arrange the algorithm as a widget for Opera or an extension for Chrome. You can adjust the automatic creation of bookmarks before closing for the desired pages and automatically go to the last position when they are opened. You can add the current browser window metric to the name of the keys in the database so that your bookmarks are set for different sizes. You can implement a server solution (fortunately, no server-side database is required, the price will be a few lines of code).

We will consider this another illustration of the capabilities of the remarkable Web Storage technology.