链接到网页的特定部分

93

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

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

hyperlink

— 姆穆克
source

1

可能的重复如何链接到页面的一部分？（哈希？）

— Quentin

要链接的答案使用这部分的链接，stackoverflow.com/questions/15481911/...

— Ruturaj Bisure

要链接页面使用这部分的链接，stackoverflow.com/questions/15481911/...

— Ruturaj Bisure

82

只需在#后面附加您要访问的<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>。

— 一个人
source

2

如果多次使用该ID怎么办？我跑进所用的MS网站id的id="in-closing">Some string</id>多次那里Some string成为一个新的字符串几次。

— kayleeFrye_onDeck

5

@kayleeFrye_onDeck如果存在多个，则HTML无效id。根据定义id，该标记是唯一的

— Kolob Canyon，

1

感谢您的澄清，@ KolobCanyon！:)

— kayleeFrye_onDeck'Jan

有没有办法用只使用一次的类来做到这一点？

— Chagai Friedlander

也许我只是天真，但是当我无意间www.site.com/page/#target失败了。确保您/的网址末尾没有。

— 诺亚

29

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

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

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

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

— 罩
source

如果网页的特定部分没有关联的ID，该怎么办？

— ajaysinghnegi 18/12/27

然后，您需要将ID添加到元素

— Cowls

1

我可以在互联网网页上的标签中添加ID吗？

— ajaysinghnegi '18

2

不，如果要在另一个网站上执行此操作，则可以尝试创建自定义JS小书签以滚动到要滚动到的部分。如果未设置ID，则无法使锚定链接正常工作。

— 考尔斯

您可以链接到上面指定的内容吗？我以前没有做过那种事情。

— ajaysinghnegi '18

10

仅当该站点已在页面中声明锚点时，才有可能。通过为标签提供name或id属性来完成此操作，因此请查找您想要链接的位置附近的任何内容。

然后语法将是

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

— 弗雷德里克
source

此name属性仅在该<a>元素上受支持，并且在HTML 5中已过时

— Quentin

对我来说，它太过重视元素。有人发生过同样的事情吗？

— Kolob Canyon

8

如果目标页面位于同一域（即与您的页面具有相同的来源）并且您不介意创建新标签（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)})})('/programming/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')

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

笔记

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

— myf
source

呵呵，它没有滚动到底部，底部也不是红色

— John D

1

…而且我也没有打开新的窗口。很可能是因为，事实上，javascript:在大多数使用默认设置的浏览器中，无法执行键入URLbar的链接的操作，这是为了防止“自我XSS”。但是您可以在Web Developers控制台中尝试它，它应该可以很好地工作。

— myf

有人可以对其进行编辑并使其更易于使用吗？我不是JavaScript专家，无法弄清楚该怎么办

— Chagai Friedlander

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＃！

— 瑞安·布坎南（Ryan Buchanan）
source

3

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

https://github.com/bokand/ScrollToTextFragment

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

它是我桌面上运行的Chrome版本，但当前必须手动启用它。大概默认情况下它将在正式版Chrome构建中默认启用，其他浏览器也将随之而来，因此确定立即开始添加到您的链接中，然后它将开始工作。

— 大乔什
source