链接到网页的特定部分答案

【问题标题】：Linking to a specific part of a web page链接到网页的特定部分
【发布时间】：2013-03-07 02:09:14
【问题描述】：

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

我认为您可以在我的链接末尾使用#partofpage 的变体。有什么建议吗？

【问题讨论】：

How do I link to part of a page? (hash?)的可能重复
要链接这部分答案，请使用以下链接，stackoverflow.com/questions/15481911/…
要链接这部分页面，请使用以下链接，stackoverflow.com/questions/15481911/…
如果在 Atlassian Confluence 中需要这样做，这不是很直接，但是他们已经在此处记录了它：confluence.atlassian.com/doc/anchors-139442.html

【解决方案1】：

只需附加一个#，后跟您要访问的<a> 标记（或其他HTML 标记，如<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>。

【讨论】：

如果该ID被多次使用怎么办？我遇到了一个 MS 站点，该站点多次使用 id="in-closing">Some string</id> 的 id，其中 Some string 多次成为新字符串。
@kayleeFrye_onDeck 如果有多个 id，则您的 HTML 无效。根据定义，id 是该标签独有的
感谢您的澄清，@KolobCanyon！ :)
有没有办法用只使用一次的类来做到这一点？
也许我只是天真，但当我不小心做了www.site.com/page/#target 时，它失败了。确保网址末尾没有 /。

【解决方案2】：

使用以下格式创建“跳转链接”：

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

其中anchor 是您希望在该页面上链接到的元素的ID。使用浏览器开发工具/查看源代码来查找您希望链接到的元素的 ID。

如果元素没有 id 并且您无法控制该站点，那么您将无法做到。

【讨论】：

如果网页的特定部分没有关联的id怎么办？
然后你需要将id添加到元素中
我可以在互联网网页上的标签中添加 id 吗？
不，如果您想对另一个网站执行此操作，您可以尝试创建一个自定义 JS 小书签来滚动到您想要滚动到的部分。如果未设置 id，则无法使锚定链接起作用。
杰伊，不可能有一个小书签可以导航到页面并滚动到某个位置。一旦您的小书签更改位置，页面就会重新加载，因此您的 js 会丢失。但是，供您参考，在当前页面上从顶部滚动到 500 像素的小书签看起来像这样：javascript:scroll({top:500})

【解决方案3】：

只有当该站点在页面中声明了锚点时才有可能。它是通过给标签一个name or id attribute 来完成的，所以寻找任何靠近你想要链接的地方。

然后语法是

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

【讨论】：

name 属性仅在 <a> 元素上受支持，它在 HTML 5 中已过时。
对我来说，它对元素的关注太低了。有没有人发生过同样的事情？

【解决方案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)})})('https://stackoverflow.com/questions/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')

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

注意事项

在当前的 Chrome 和 Firefox 中测试，通常应该可以工作，因为它基于定义的标准行为。
无法在 SO 的交互式 sn-p 中进行说明，因为它们与页面原点隔离。
MDN: Window.open()
(1) window.open(url,'_self') 似乎正在破坏load 事件；基本上使window.open 表现得像普通的a href="" 点击导航；还没有进一步研究。

【讨论】：

呵呵它没有滚动到底部并且底部不是红色
……我想它也没有打开新窗口。很可能是因为事实上，在大多数浏览器中，输入 URLbar 的 javascript: 链接的执行不再适用于默认设置，作为“自我 XSS”预防。但是您可以在 Web Developers 控制台中尝试它，它应该可以正常工作。
有人可以编辑它并使其更易于使用吗？我不是 javascript 专家，不知道该怎么做

【解决方案5】：

即将推出的 Chrome“滚动到文本”功能正是您想要的......

https://github.com/bokand/ScrollToTextFragment

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

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

【讨论】：

【解决方案6】：

First off target 是指在您尝试链接的 HTML 代码或 chrome 开发人员工具中找到的 BlockID。每个代码都不同，您需要进行一些挖掘才能找到您尝试引用的 ID。它应该类似于div class="page-container drawer-page-content" id"PageContainer"注意，这是整个引用部分的格式，而不是单个文本或图像。为此，您需要找到与您的目标块相关的同一段代码。例如dv id="your-block-id" 不管怎样，我只是在阅读这个帖子，我想到了一个想法，如果你是 Shopify 用户并且想要这样做，那么它与所说的几乎相同。但不是

> http://url.to.site/index.html#target

你会放

> http://storedomain.com/target

例如，我正在设置一个免责声明页面，其中包含指向我的主页上的新闻通讯注册和购物块的链接，因此我插入https://mystore-classifier.com/#shopify-section-1528945200235 作为我的超链接。请注意，-classifier 仅供我内部使用，不适用于您。这只是为了让我可以跟踪我的商店。如果你想链接到你的主页以外的东西，你会放

> http://mystore-classifier.com/pagename/#BlockID

我希望有人觉得这很有用，如果我的解释有问题，请告诉我，因为我不是 HTML 程序员，我的语言是 C#！

【讨论】：