是否可以仅使用链接滚动到HTML文档的任何部分？

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

RFC 5147 proposes something similar for plain text documents only. However, none of the mainstream browsers have implemented this functionality yet.

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:

• http://example.com/document.txt#line=10,20

Answer 2

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.

Answer 3

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 4

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 ).