javascript 获取链接到HTML中的特定段落,没有id [重复]

1sbrub3j  于 2023-04-28  发布在  Java
关注(0)|答案(3)|浏览(110)

此问题已在此处有答案

Is there a way to bookmark or link to a section of a page without an anchor?(9个回答)
2天前关闭。
我想把我的读者引导到第三方HTML网页的特定位置。感兴趣的段落看起来像这样:

<div>
<h1>qwerty</h1>
<p>blah blah</p>
</div>

正如你所看到的,没有一个元素有id s(所以这个http://webpage/#id不能工作)。但是,<h1>标记中的单词是唯一的,无法在文档的其他任何位置找到。有没有一种方法可以提供一个链接,将用户直接带到网页上的那个位置?

e3bfsja2

e3bfsja21#

从2023年开始,你可以在支持的浏览器中使用所谓的Text Fragments
模式是:https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
并且可以通过浏览器在右键单击上下文菜单中创建,就像在chrome中使用 * 复制链接到突出显示 * 一样。
在这种情况下,追加#:~:text=qwerty就可以了
进一步的回答,以及可能的重复:https://stackoverflow.com/a/61703068/731179

oug3syen

oug3syen2#

你不能只链接到页面中的一些文本,所以如果你不控制网站,这是不可能的。
据我所知,你能做的最接近的事情是使用citebite,它会创建一个新的页面,插入一个id,这样它就可以带你到那个部分。然而,这是相当击中或错过在我的经验。

8gsdolmq

8gsdolmq3#

更好的方法是在元素中使用id属性。
但是你可以使用jquery :contains选择器来查找包含hash的元素。然后获取元素的顶部位置并将窗口滚动到该位置。

window.location.hash = "id";

var hash = window.location.hash.replace("#", "");
var scrollTop = $("h1:contains(" + hash + ")").offset().top;

window.scrollTo(0, scrollTop);
div {
    height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<h1>id</h1>
<div></div>
<h1>id2</h1>
<div></div>

相关问题