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 回答