117

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

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

4

6 回答 6

105

只需附加 a#后跟您尝试访问的<a>标记（或其他 HTML 标记，如 a ）的 ID。<section>例如，如果您尝试链接到此 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>。

于 2013-03-18T16:29:10.117 回答
36

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

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

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

如果元素没有 id 并且您不控制该站点，那么您将无法执行此操作。

于 2013-03-18T16:29:20.020 回答
11

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

然后语法将是

<a href="page.html#anchor">text</a>
于 2013-03-18T16:30:26.007 回答
9

如果目标页面在同一个域上（即与您的页面共享相同的来源）并且您不介意创建新选项卡 (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')

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

笔记

  • 在当前的 Chrome 和 Firefox 中测试，通常应该可以工作，因为它基于定义的标准行为。
  • 无法在此处的交互式代码段中进行说明，因为它们与页面原点隔离。
  • MDN: Window.open()
  • (1)window.open(url,'_self')似乎正在破坏load事件；基本上使window.open行为像普通的a href=""点击导航；还没有研究更多。
于 2017-07-10T16:15:36.423 回答
5

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

https://github.com/bokand/ScrollToTextFragment

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

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

于 2019-07-08T19:46:48.413 回答
3

第一个目标是指在您尝试链接的 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#！

于 2018-06-26T22:50:07.777 回答