最通用的描述方式是，我只想在客户端看到视口的某一部分后仅触发一个网络请求，然后以最有效的方式使用它并在 iframe 中显示它。
给定一个 DOM 结构如下：
<!DOCTYPE html>
<html>
<head />
<body>
...
<iframe loading="lazy" sandbox="" src="http://www.example.com" />
<pre />
...
</body>
</html>
我想在标签中向客户展示上述pre内容的来源iframe。该iframe元素可以承载任意文档，它可以是文本的或二进制的，所知道的是浏览器可以显示它。iframe 的源 URL 托管在同一源上。
我的目标是通过访问 Chromium“view-source:”URL 或类似的 URL 来显示人们会看到的内容。
访问.contentWindow或.contentdocument属性可能是不可能的，因为它完全是沙盒的，但即使我可以，文档的也outerHTML不够，并且使用 anXMLSerializer显然会改变输出。另外，我相信浏览器可以编辑文档的某些区域，例如不必要的空格或格式。
我只是尝试了以下方法：
document
.body
.querySelector("iframe")
.addEventListener(
"load",
async ( { currentTarget: { src } } ) => {
const data = await fetch(
src, {
cache: "only-if-cached"
}
);
// ... use data
}, {
passive: true,
once: true
}
);
然而，获取失败。该 URL 似乎不在浏览器的缓存中，但我不想发起新的网络请求，有没有一种有效的方法可以做到这一点？
我正在考虑使用 Intersection Observer 作为一种潜在的解决方案，因为它只会导致一个网络请求，但代码相当长，而且它似乎无法正常工作（我对观察者缺乏经验）。
海绵宝宝撒
相关分类