带有srcdoc的iframe :同页链接在框架中加载父页面
同一页面链接的工作方式是引用在同一页面上具有id="sec-id"的另一个元素，使用
<a href="#sec-id"></a>例如。像这样的链接是相对的。
但是，如果我在LaTeX.js游乐场iframe中使用完全相同的语法，它不仅会滚动到目标元素，而且(重新)加载ifame中的整个游乐场页面。(请注意，我使用iframe.srcdoc = html以编程方式设置了iframe的内容)
示例：LaTeX.js playground，在第一节的末尾单击“另请参阅第11节”中的链接。在右侧的iframe中。
可能的原因是什么？
更新URL :我现在了解了问题的根源:浏览器使用文档的基URL来使所有相对成为绝对URL(请参阅)。问题从内容设置为srcdoc的iframe开始:没有指定惟一的基URL，在这种情况下使用父框架/文档的基URL--在我的例子中是游乐场(参见HTML Standard)。
因此，问题就变成了:是否有一种方法可以在基URL中引用srcdoc iframe？或者，有没有可能让浏览器不预先预置基础？或者创建一个不改变相对#sec-id URL的基URL？
回答 3
Stack Overflow用户
发布于 2018-06-08 03:09:00
如何捕捉事件并滚动到所需的锚点？
$("a").click(function(e) {
$('.iframe').animate({
scrollTop: $(e.target.attr('href')).offset().top
}, 2000);
return false;
});Stack Overflow用户
发布于 2018-06-06 18:57:13
我不知道你是如何解决这个问题的，我想这是因为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');Stack Overflow用户
发布于 2018-06-07 19:23:17
根据记录，我的问题似乎是不可能的，即不可能在使用srcdoc设置其内容的iframe中使用相对同页链接。必须使用一种变通方法，请参阅另一个答案。
https://stackoverflow.com/questions/50657574
复制相似问题