Is it possible to scroll to any part of HTML document using only link to it?

Question

So I want to use link like http://example.com/fo.html#line22 on ANY HTML page (meaning I can not change the page HTML code but I can read it before giving link) to scroll to line 22 of HTML document or knowing contents to some Known as existing line or button on that page. How to do such thing?

Answer 1

No, a named anchor or other element would need to be present on the page with the same id or name as supplied in the hash value of the url.

http://en.wikipedia.org/wiki/Fragment_identifier#Examples

Update: It looks like people have at least thought about the possibility of adding the functionality to fragment identifiers. From the same Wikipedia link:

K. Yee of the Foresight Institute proposes "extended fragment identifiers" delimited with colons and a keyword to differentiate them from anchor identifiers. A text search fragment identifier with "fragment specification scheme" id "words" is the first proposal in this scheme.[8] The following example would search a document for the first occurrence of the string "some context for a search term" and then highlight the words "search term": http://example.com/index.html#:words:some-context-for-a-(search-term)

and

RFC 5147 proposes a fragment identifier for text/plain [read: not HTML] documents, based on character and line positions and ranges within the document using the keywords "char" and "line".[6] This example identifies lines 11 through 20 of a text document, for instance:

Answer 2

You can use the URl to link to any element with an ID or name attribute, but there's nothing else you can do to direct the browser unless you control the source.

IDs are usually found in many places on the page, so by reading through the source you might find something to grab onto. For example, you could link to http://example.com/fo.html#login_box to make the page scroll down to the login box below.

<div id="login_box">
   Username:
   Password:
</div>

Answer 3

This is going to be hard and painful. I'd recommend to just scroll by pixels with help of window.scrollTo.

window.onload = function() {
    var line = parseInt(location.hash.replace(/#line/, ''));
    if (line) window.scrollTo(0, 10 * line);
};

This way page#line22 will scroll down by 220 pixels. You can modify the pixels-per-line in the code (which is currently 10).

Answer 4

There is no way you are going to be able to do this by just editing the link if you don't have a named anchor, as stated a couple times before in this thread, but...

If you can read the document you can also substitute it.

• read and cache the document, placing a tiny snip of html where you want to scroll to like this:

  <span id="scroll-to-id"><!-- nothing in here --></span>

• instead of the original url, give a link to your cached page with the id of your inserted snippet:

  http://www.yourwebsite.com/scrollto.php?{urlencoded-url-of-other-page}?scrollto={linenumber};#scroll-to-id

scrollto.php should fetch the html document, process and cache it according to linenumber.

You'll probably also want to insert a header into the cache stating you don't own the page and add a link to the page in its original context.

You'll still have to work out what constitutes a line to find the right place in the document, but you could probably load the external html into a DOMDocument, convert to text ($document->documentElement->nodeValue should get you started) and work with that.