javascript - 跳转到 Iframe 中不同部分的父页面上的 anchor 链接

Question

我有一个主要的父页面，我已经设置了页面部分名称

触发时，我希望 iFrame 向下滑动到 iFrame 内的那个部分。这可能吗？我知道在同一个页面内我可以创建一个具有相同 href="#ID"的 ID，但我不知道从哪里开始。任何解决方案或建议都会很棒。谢谢!

Answer 1

您可以为 IFRAME 提供一个 name 属性，并为链接提供一个指向该特定名称的 target 属性。这是一个例子:

#container {
  display: flex;
}
a, iframe {
  margin: 0 16px 8px;
  display: block;
}

<div id="container">
  <div>
    <a href="https://vuejs.org/#hero" target="my-iframe">
      Go to the top in the IFRAME
    </a>
    <a href="https://vuejs.org/#footer" target="my-iframe">
      Go to the footer in the IFRAME
    </a>
  </div>

  <iframe name="my-iframe" src="https://vuejs.org/" width="300" height="200"></iframe>
</div>

请注意，我在 HREF 属性中提供了完整的 URL https://vuejs.org/#footer，而不仅仅是 #footer；速记版本仅在链接目标位于同一文档中时才有效。只要 # 之前的 URL 没有改变，浏览器仍然只会滚动到指定的目标，不会重新加载框架。