iframe与srcdoc：同页链接加载框架中的父页面

Posted 2021-05-06

同页链接的工作原理是引用另一个在同一页面上使用id="sec-id"的元素

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

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

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

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

可能是什么原因？

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

因此，问题变成：有没有办法在基本URL中引用srcdoc iframe？或者是否可以使浏览器不添加基础？或者创建一个不改变相对#sec-id URL的基本URL？

答案

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

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

另一答案

我不知道你究竟如何解决这个问题，我认为这是因为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');

另一答案

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