最通用的描述方式是，我只想在客戶端看到視口的某一部分后僅觸發一個網絡請求，然后以最有效的方式使用它并在 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 作為一種潛在的解決方案，因為它只會導致一個網絡請求，但代碼相當長，而且它似乎無法正常工作（我對觀察者缺乏經驗）。
如何在 iframe 加載后從緩存中讀取它的*原始*源
DIEA
2023-07-14 16:21:52
