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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe与srcdoc:同页链接加载框架中的父页面相关的知识,希望对你有一定的参考价值。

同页链接的工作原理是引用另一个在同一页面上使用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中使用相对同页链接。必须使用解决方法,请参阅其他答案。

以上是关于iframe与srcdoc:同页链接加载框架中的父页面的主要内容,如果未能解决你的问题,请参考以下文章

为啥我无法访问设置了 src 或 srcdoc 属性的 iframe 文档?

如何在 iframe 的“srcdoc”属性中设置 HTML 代码?

在 iframe 中添加一个脚本标签,其内容由 srcdoc 设置

从 iFrame 加载顶部框架中的页面

将 target=“_top” 添加到 fancybox iframe 内的墨迹

如何在iframe里面添加html内容