Question

同页链接的工作方式是使用

引用同一页面上id="sec-id"的另一个元素

<a href="#sec-id"></a>

例如

。像这样的链接是相对的。

但是，如果我在LaTeX.js游乐场的iframe中使用相同的语法，它不会只滚动到目标元素，而是（重新）加载ifame中的整个游乐场页面。（请注意，我使用iframe.srcdoc = html）

以编程方式设置iframe的内容

示例：LaTeX.js playground，在第一部分的末尾点击“另请参阅第11节”中的链接。在右侧的iframe中。

可能是什么原因？

更新：我现在了解问题的根源：浏览器使用文档的基本URL使所有相对网址成为绝对网址（请参阅<base>）。问题始于iframe的内容设置为srcdoc：没有指定唯一的基本URL，在这种情况下使用父框架/文档的基本URL - 在我的情况下操场（参见HTML Standard）。

因此，问题就变成：有没有办法在基本网址中引用srcdoc iframe？或者是否可以使浏览器不作为基础？或者制作一个不会改变相对#sec-id网址的基本网址？

Answer 1

我不确切知道如何解决这个问题，我认为这是因为srcdoc，您不能将src与内容类型一起使用，因为该字符限制，但你可以将它转换为Blob它有点工作，虽然风格丢失。也许您可以根据您的页面使用它作为起点：

// Get the document content
const doc = document.querySelector('iframe').srcdoc;
// Convert it to blob
const blob = new Blob([doc], {type : 'text/html'});
// Load the blob on the src attr
document.querySelector('iframe').src = URL.createObjectURL(blob);
// Remove srcdoc to allow src
document.querySelector('iframe').removeAttribute('srcdoc');

Answer 2

如何捕捉事件并滚动到所需的锚点？

$("a").click(function(e) {
    $('.iframe').animate({
       scrollTop: $(e.target.attr('href')).offset().top
    }, 2000);
    return false;
});

Answer 3

对于记录，似乎我的问题是不可能的，即，无法在使用srcdoc设置其内容的iframe中使用相对同页链接。必须使用解决方法，请参阅其他答案。

使用srcdoc的iframe：同页链接加载框架

3 个答案: