Html 如何仅使用 URL 链接到页面中的特定文本行?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17050563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to link to specific line of text in page, using only URL?
提问by Fuzz Evans
I am curious if there is a way to use only a URL to send someone to a specific line at a given page. Citebite does this, however it links to a cached page instead of the actual live page. http://citebite.com/
我很好奇是否有一种方法可以仅使用 URL 将某人发送到给定页面的特定行。Citebite 会这样做,但是它链接到缓存页面而不是实际的实时页面。http://citebite.com/
You can also do something similar with PDF's where you give it a designated page #: Link to page 6 in the listed pdf. http://mises.org/journals/scholar/long.pdf#page=6
您还可以对 PDF 执行类似操作,在其中指定指定页面 #:链接到列出的 pdf 中的第 6 页。 http://mises.org/journals/scholar/long.pdf#page=6
I have done a lot of looking and all I am finding are for embedding the link in HTML, which isn't what I'm after. Ideally I would like to be able to just send a URL that jumps to a specific line of text/ highlights it (exactly like Citebite does, but without having to use Citebite).
我已经做了很多查找,我发现的只是将链接嵌入到 HTML 中,这不是我所追求的。理想情况下,我希望能够发送一个跳转到特定文本行/突出显示它的 URL(与 Citebite 完全一样,但不必使用 Citebite)。
采纳答案by Mostafa Berg
Depends on the situation:
视情况而定:
1-Your own content
1-您自己的内容
a.Simply add a href id, and then send a link to that (http://exmaple.com/document.php#myLine)
一种。只需添加一个 href id,然后发送一个链接(http://exmaple.com/document.php#myLine)
b.For a more advanced solution, you can scroll to a specific area and highlight it using javascript, basically you call something like this: http://example.com/document.php?scrollX=100&scrollY=230
湾 对于更高级的解决方案,您可以滚动到特定区域并使用 javascript 突出显示它,基本上您可以这样调用:http: //example.com/document.php?scrollX=100&scrollY=230
and in your PHP code you have a function like this:
在你的 PHP 代码中,你有一个这样的函数:
<?php
if(isset($_GET['scrollX']) && isset($_GET['scrollY')){
?>
<script type="text/javascript">
window.scrollTo(<?= $_GET['scrollX'];?>, <?=$_GET['scrollY'];?>);
</script>
<?
}
?>
You can also use JQuery and do more fancy things like highlighting text or changing CSS values depending on the arguments
您还可以使用 JQuery 并根据参数做更多奇特的事情,例如突出显示文本或更改 CSS 值
2-Someone else's content
2-别人的内容
You cannot directly link to a specific line or area without a browser extension or an external service like CiteBite, however with some hackery you can build your own little service that displays the website and run your own JS on it (think iFrames or something like that)
如果没有浏览器扩展或像CiteBite这样的外部服务,你不能直接链接到特定的行或区域,但是通过一些hackery,你可以构建自己的小服务来显示网站并在其上运行你自己的 JS(想想 iFrames 或类似的东西)
回答by David Bélanger
You must give an ID to your element. Example: <div id="footer">Footer</div>
. If you go to mypage.html#footer
, the browser will get you there.
您必须为您的元素提供一个 ID。例子:<div id="footer">Footer</div>
。如果您转到mypage.html#footer
,浏览器会将您带到那里。
If it's not your webpage, look in the code, you may find an ID element next to the text you want.
如果不是您的网页,请查看代码,您可能会在所需文本旁边找到一个 ID 元素。
回答by MickJ
As far as my knowledge goes, you cannot do it natively without some sort of caching, plugins or addons or having full control over html where you can embed anchor tags.
就我所知,如果没有某种缓存、插件或插件或完全控制 html,您就无法在本机上完成它,您可以在其中嵌入锚标记。
回答by Silas S. Brown
There is an experimental feature in Chrome 74called Scroll To Text Fragment which allows you to specify phrases to be highlighted in a URL. We may have to wait a while before this becomes finalised and supported in browsers by default.
Chrome 74 中有一项名为 Scroll To Text Fragment的实验性功能,它允许您指定要在 URL 中突出显示的短语。我们可能需要等待一段时间才能最终确定并在浏览器中默认支持。
Meanwhile, if the article to which you want to link also has a PDF version, you could use a URL like https://example.org/file.pdf#page=2&search=findme
to highlight findme
on page 2.
同时,如果您要链接的文章也有 PDF 版本,您可以使用像在第 2 页https://example.org/file.pdf#page=2&search=findme
上突出显示的 URL findme
。