链接到网页的特定部分

Question

如何在另一个我无法控制的网站上创建指向长网页的一部分的链接？

我以为你可以在链接的末尾使用#partofpage的变体.有什么建议？

Answer 1

只需附加一个#后跟您要尝试访问的<a>标记(或其他HTML标记,如a <section>)的ID .例如,如果您尝试链接到此HTML中的标头:

<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>

你可以使用这个链接<a href="http://url.to.site/index.html#target">Link</a>.

Answer 2

使用以下格式创建"跳转链接":

http://www.somesite.com/somepage#anchor

其中anchor是您要在该页面上链接到的元素的id.使用浏览器开发工具/视图源查找要链接到的元素的ID.

如果元素没有id并且你不控制那个站点那么你就不能这样做了.

Answer 3

只有当该网站在页面中声明了锚点时,才有可能.这是通过为标记提供name或id属性来完成的,因此请查找您要链接到的位置附近的任何属性.

然后语法就是

<a href="page.html#anchor">text</a>

Answer 4

如果目标页面位于同一域中（即与您的页面具有相同的来源），并且您不介意创建新标签（1），则可以（ab）使用一些JavaScript：

<a href="javascript:void(window.open('./target.html').onload=function(){this.document.querySelector('p:nth-child(10)').scrollIntoView()})">see tenth paragraph on another page</a>

琐事：

var w = window.open('some URL of the same origin');
w.onload = function(){
  // do whatever you want with `this.document`, like
  this.document.querySelecotor('footer').scrollIntoView()
}

您现在可以尝试的这种“利用”的工作示例可能是：

javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('/sf/ask/3150996831/','footer')

如果您将其输入到位置栏中（请注意Chrome浏览器会javascript:从剪贴板粘贴时删除前缀），或者将其设href为此页面上任何链接的值（使用开发人员工具），然后单击它，则将滚动到另一个（重复的）SO问题页面页脚和页脚涂成红色。（添加了作为延迟的解决方法，以解决由ajax加载的内容在加载后将页脚向下推的问题。）

笔记

• 在当前的Chrome和Firefox中进行了测试，由于它基于已定义的标准行为，因此通常应该可以使用。
• 在SO的交互式代码段中无法进行说明，因为它们与页面原点是隔离的。
• MDN：Window.open（）
• （1）window.open(url,'_self')似乎正在打破load事件；基本上使window.open行为类似于普通的a href=""单击导航；尚未进行更多研究。

Answer 5

你现在可以...

从 Chrome 版本 81（2020 年 2 月）开始，有一项名为“文本片段”的新功能。它允许您提供一个在指定的精确文本处打开的链接（突出显示该文本）。

目前，它可以在 Edge、Chrome 和 Opera 中运行，但不能在 Firefox、Safari 或 Brave 中运行。（更多内容请参见底部注释6）

出于安全原因，该功能要求在 noopener 上下文中打开链接。因此，请确保在锚标记中包含 rel="noopener" 或将 noopener 添加到窗口功能特性的 Window.open() 列表中。

您可以通过将此字符串附加到 URL 末尾来创建指向所需文本的链接：

/#:~:text=

并提供百分比编码的搜索字符串：

 /#:~:text=String%20to%20focus%20on

这是一个工作示例：

https://newz.icu/#:~:text=Google%20surveillance%20increases

笔记：

1. 仅在 Chrome 或 Opera 中测试上述链接

2. 在上面的示例中，请注意，文本字符串位于通常在页面加载时隐藏的 div 中 - 因此在本示例中，无论通常会发生什么，它都会显示。有用。

3. 当您右键单击所选文本时，最新版本的 Chrome 还包含一个新选项：复制链接以突出显示。这将为您自动创建直接到文本的链接（即，它会自动将 附加/#:~:text=到您突出显示的文本）并将其放置在剪贴板中 - 只需将其粘贴到所需的位置即可。

4. 假设您想突出显示整个文本块？文本片段功能允许指定 astarting%20phrase和 an ending%20phrase （以逗号分隔），并且它将突出显示之间的所有文本：
   https://newz.icu/#:~:text=Dr.%20Mullis,before%20now
   ^{请注意逗号之间 Mullis ​ before}
   

5. web.dev 关于文本片段的文章

6. 文本片段的 CanIUse 状态

/#:~:text=

Answer 6

即将推出的 Chrome“滚动到文本”功能正是您正在寻找的......

https://github.com/bokand/ScrollToTextFragment

您基本上#targetText=在 URL 的末尾添加，浏览器将滚动到目标文本并在页面加载后突出显示它。

它在我办公桌上运行的 Chrome 版本中，但目前必须手动启用。据推测，它很快将在生产 Chrome 构建中默认启用，其他浏览器也将跟进，所以现在可以开始添加到您的链接，然后它将开始工作。