带srcdoc的iframe：同一页面链接将框架中的父页面加载

Question

通过使用以下方法引用id="sec-id"同一页面上的另一个元素，可以使用同一页面链接

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

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

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

示例：LaTeX.js操场，在第一部分的结尾处，单击“另请参阅第11部分”中的链接。在右侧的iframe中。

可能是什么原因？

UPDATE：现在我明白了问题的根源：浏览器使用文档的基本URL来使所有相对URL都是绝对的（请参阅参考资料<base>）。麻烦始于其iframe的内容设置为srcdoc：没有指定唯一的基本URL，在这种情况下，将使用父框架/文档的基本URL（在我的情况下为游乐场）（请参阅HTML标准）。

因此，问题就变成了：有没有办法srcdoc在基本URL中引用iframe？还是有可能使浏览器不在基础之上？或制作不更改相对#sec-idURL 的基本URL？

Answer 1

捕捉事件并滚动到所需的锚点怎么样？

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