Question

所以我想在任何HTML页面上使用http://example.com/fo.html#line22之类的链接（意思是我无法更改页面HTML代码，但我可以在给出链接之前阅读它）以滚动到HTML文档的第22行或知道内容到一些在该页面上称为现有行或按钮。怎么做这个？

Answer 1

不需要在页面上显示一个命名锚点或其他元素，其中包含与网址哈希值相同的id或name。

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

RFC 5147仅针对纯文本文档提出类似的内容。但是，主流浏览器都没有实现此功能。

RFC 5147使用关键字“char”和“line”根据文档中的字符和行位置和范围，为 text / plain [read：not HTML]文档提出片段标识符。 [6]此示例标识文本文档的第11行到第20行，例如：


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

Answer 2

如果您没有命名锚点，只要编辑链接就没有办法实现这一点，正如之前几次在此主题中所说的那样，但是......

如果您可以阅读该文件，也可以替换它。

读取并缓存文档，将一小段html放在要滚动的地方，如下所示：

<span id="scroll-to-id"></span>
而不是原始网址，请使用您插入的代码段的ID提供指向您的缓存页面的链接：

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

scrollto.php应该获取html文档，根据整数来处理和缓存它。

您可能还想在缓存中插入一个标题，说明您不拥有该页面，并在其原始上下文中添加指向该页面的链接。

你仍然需要找出构成一行的内容才能在文档中找到正确的位置，但你可以将外部html加载到DOMDocument，转换为文本（$document->documentElement->nodeValue应该让你开始）并与之合作。

Answer 3

您可以使用URl链接到具有ID或名称属性的任何元素，但除非您控制源，否则您无需执行任何其他操作来指导浏览器。

ID通常位于页面的许多位置，因此通过阅读源代码，您可能会找到要抓取的内容。例如，您可以链接到http://example.com/fo.html#login_box以使页面向下滚动到下面的登录框。

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

Answer 4

这将是艰难而痛苦的。我建议您在window.scrollTo的帮助下按像素滚动。

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

这种方式page#line22将向下滚动220像素。您可以修改代码中的每行像素数（当前为10）。

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

4 个答案: