滚动到 iframe 中的锚点

Posted 2023-05-09

【中文标题】滚动到 iframe 中的锚点

【英文标题】：scroll to anchor in an iframe

【发布时间】：2020-10-17 16:02:56

【问题描述】：

我自己的服务器上有一些较大的内容，还有一个父（主）页面，可以从中选择和阅读它们。整体看起来不是很复杂，所以我认为我可以使用一个简单的 html 和一些 javascript。内容显示在 ID 为“TextFrame”的 iframe 中。

现在，如果我有一个包含类似参考的目录

<a href="Book2.htm#Chapter7" target="TextFrame">Chapter 7 in the Second Book</a>

我将文档 Book2.htm 放入 iframe，它会滚动到 ID #Chapter7 - 只要我使用从测试父 html 文件到名为 Book2.htm 的文件的简单链接尝试它。

现在，我实际上从我的服务器加载了文件 - 可选用两种语言，所以我添加了两个调用 javascript 函数的参数：

function LoadContent(theref) 
  var ifrm = document.getElementById('TextFrame');
  var Language1 = document.getElementById('Language1');
  var Language2 = document.getElementById('Language2');

  ifrm.src = theref+'?Lang1='+Language1.value+'&Lang2='+Language2.value;

这也有效。

但是现在，我希望 iframe 中的文本滚动到第 7 章（到目标引用）。 像

这样的结构

ifrm.src = 'Book2#Chapter7?Lang1=FRA&Lang2=ENG' 

甚至没有传输到服务器... 有人知道怎么做吗？

【参考方案1】：

你是对的，URL 片段（# 之后的部分）不会发送到服务器。这就是为什么你应该遵循这个构造顺序：

scheme:[//authority]path[?query][#fragment]

更多关于Wikipedia的信息。

因此，构建您的 URL：

ifrm.src = 'Book2.html?Lang1=FRA&Lang2=ENG#Chapter7'