如何仅使用 URL 链接到页面中的特定文本行？

Posted 2023-02-22

【中文标题】如何仅使用 URL 链接到页面中的特定文本行？

【英文标题】：How to link to specific line of text in page, using only URL?

【发布时间】：2013-06-07 16:24:39

【问题描述】：

我很好奇是否有一种方法可以仅使用 URL 将某人发送到给定页面的特定行。 Citebite 会这样做，但是它链接到缓存页面而不是实际的实时页面。 http://citebite.com/

你也可以对 PDF 做类似的事情，给它一个指定的页面#： 链接到所列 pdf 中的第 6 页。 http://mises.org/journals/scholar/long.pdf#page=6

我做了很多查找，我发现的只是将链接嵌入 html，这不是我想要的。理想情况下，我希望能够只发送一个跳转到特定文本行/突出显示它的 URL（就像 Citebite 一样，但不必使用 Citebite）。

【问题讨论】：

您是否尝试链接到您自己页面或其他网站上的特定行？您可以使用锚标记来执行此操作，但前提是您可以将这些锚标记添加到您要链接到的 HTML 中。

不，它们不是我可以修改 HTML 标签的网站。

【参考方案1】：

视情况而定：

1-您自己的内容

a. 只需添加一个 href id，然后发送指向该 ID 的链接 (http://exmaple.com/document.php#myLine)

b. 对于更高级的解决方案，您可以滚动到特定区域并使用 javascript 突出显示它，基本上您可以这样调用： http://example.com/document.php?scrollX=100&scrollY=230

在你的 PHP 代码中，你有一个这样的函数：

<?php
if(isset($_GET['scrollX']) && isset($_GET['scrollY'))
    ?>
       <script type="text/javascript">
           window.scrollTo(<?= $_GET['scrollX'];?>, <?=$_GET['scrollY'];?>);
       </script>
    <?

?>

您还可以使用 JQuery 并做更多花哨的事情，例如突出显示文本或根据参数更改 CSS 值

2-别人的内容

如果没有浏览器扩展程序或CiteBite 等外部服务，您无法直接链接到特定行或区域，但是通过一些hackery，您可以构建自己的小服务来显示网站并在其上运行您自己的JS（想想iFrames 或类似的东西）

【参考方案2】：

您必须为您的元素提供一个 ID。示例：<div id="footer">Footer</div>。如果你去mypage.html#footer，浏览器会带你去那里。

如果不是您的网页，请查看代码，您可能会在您想要的文字旁边找到一个 ID 元素。

【参考方案3】：

据我所知，如果没有某种缓存、插件或插件或完全控制可以嵌入锚标记的 html，您就无法在本地进行。

【参考方案4】：

有an experimental feature in Chrome 74 称为滚动到文本片段，它允许您specify phrases to be highlighted in a URL。我们可能需要等待一段时间才能最终确定并默认在浏览器中支持。

同时，如果您要链接的文章也有 PDF 版本，您可以使用https://example.org/file.pdf#page=2&search=findme 之类的 URL 在第 2 页突出显示findme。

【讨论】：

此功能已在 Chrome 80 中稳定发布。在article 中了解更多信息。