Cross-browser bookmarks to any page position

Introduction

There are times when you have to read large text in several tricks in the browser. It can be a novel, an article, or a technical guide. It’s good when the document is divided into chapters and equipped with convenient 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 continuous? Or links to internal sections are not provided? Or are the sections themselves too large and it’s difficult to find the right paragraph inside the section later?

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

But such a multiplication of entities is not convenient for everyone. Let's try to find a simpler way.

For this method to be universal, you will have to focus not on the structure of the document (it may not contain any tags at all body, and maybe pre) and not on the text content (there may be repeating lines in the text or the document may be a collection of unsigned pictures). It remains to focus on the most precarious - the metric. Namely, the distance scrolled from the beginning of the document (pages with horizontal scrolling are rare and so far can be neglected).

An algorithm is emerging: we need to get the distance from the beginning of the document to the place of reading and save it somewhere, so that later we need to request to scroll the page to the desired section. To do this, you will need: a cross-browser method for determining the scroll distance, a cross-browser storage for the bookmark database and a cross-browser interface for saving and restoring the position in the document (the algorithm can be used for server solutions, but we are still interested in the client side).

The algorithm will have at least two minuses: snapping to the size of the browser window (however, users are unlikely to change this size often; in addition, there is an ideahow to minimize this dependency) and support for only static documents (for example, you won’t be able to use it for a frequently changing friends page in LiveJournal or for a news feed).

1. Scroll Definition

Because Internet Explorer does not support the property window.scrollYand window.pageYOffsetwe will use element.scrollTop. Which element to take depends on the browser operating mode, that is, on the doctypepage. In standards compliance mode, you need to use document.documentElement.scrollTop, in compatibility mode (quirks mode) - document.body.scrollTop. Fortunately, we do not need to check the mode: the property of an scrollToperroneously selected element will always be zero for any scrolling, so you can simply iterate over both elements and save a value other than zero.

2. Bookmark storage

The only cross-browser storage method that seems convenient is Web Storage . 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, we say goodbye to supporting old versions. The only negative: not all browsers support this technology for local files. Since the functions of the object localStoragecreate and request data in the database, focusing on page domains, and all local files (that is, pages loaded by the protocol file:///) do not have a domain, there is a difficulty that not all browsers have managed to deal with so far. Chrome, Opera and Safari support technologylocalStoragefor offline documents by creating a common keystore for all local files. Internet Explorer throws an error not finding an object localStoragefor documents without a domain. Firefox is generally partisan silent and does nothing in places where functions are called (the bug is logged here and here ). Therefore, for the last two browsers, the only way out is to read online or from the browser cache.

For each page that interests us, we will create a unique key in the database, consisting of an arbitrary prefix and the full URL of the document. So bookmarks will be automatically correlated with their objects and they 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 the old proven path - bookmarklets .

Connect the components

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

Scroll save code (bookmark):

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

Scroll recovery code (bookmark transition):

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 the pieces of long lines disappear beyond the borders of the topic) and, following the rules, wrap the code in anonymous functions that do not return values, we get the following bookmarklets:

Scroll save code (bookmark creation):

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

Scroll recovery code (bookmark transition):

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 protocol is changed javascript. Therefore, it remains to create three bookmarks from scratch and enter the function code instead of the address.

If it seems uncomfortable for someone, you can drag and drop links from here (in Internet Explorer it is better to act through the context menu of links, adding them to the desired Favorites folder, because dragging and dropping bookmarklets does not always work).

Of course, these rudiments of functions can be developed already by means of each browser. You can use GreaseMonkey or Custom Buttons for Firefox (or create a full-fledged extension), you can design the algorithm as a widget for Opera or an extension for Chrome. You can set up automatic creation of bookmarks before closing for the desired pages and automatic transition to the last position when they open. 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 database on the server side is required, the price will be a few lines of code).

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