我目前正在设置一个网页，该网页使用 IndexedDB 在此页面的 iframe 中显示 html 文档。此文档已作为 blob 在数据库中。另外，我想让这个网页在线和离线工作。我使用了 MDN 的代码来帮助我从这一切开始。
现在，我一次显示一个文档，方法是创建一个指向 blob 的 url 并将其放入 iframe 的src属性中。html 文档显示良好，但由于 css 和 javascript 文件在 html 源中使用“localhost:8080/my_css.css”之类的 url 链接，我目前正在使用存储在我的服务器上的 CSS/JS 和图像，它会一旦我将离线，将无济于事。
我的问题是：有没有办法（如果可能的话非常简单）将存储在数据库中的 CSS/JS/图像绑定到 html 文档而不修改此文档的 html 代码以在 iframe 中完美显示它们？我想我可以使用 Application Cache API 在本地存储我需要的文件，但是因为可能有很多 CSS 和 JS 文件，我宁愿使用 IndexedDB API 的方式。
非常感谢你的回答 ！
如果有帮助，我的 HTML 是什么样子的：
<ul id="blob-list"> /*List of blobs is generated here */ </ul>
<iframe id="myframe" name="myframe"> /*My html documents are displayed here*/ </iframe>
<script type="text/javascript">
const DB_NAME = 'testdatabase';
const DB_VERSION = 1; // Use a long long for this value (don't use a float)
const DB_STORE_NAME = 'publications';
var db;
/**
* @returns Permet d'ouvrir la DB afin de pouvoir l'utiliser
*/
function openDb() {
/* Open Database, create a store if not any and display its content. Code based on MDN example */
}
/* setInViewer is called every time a blob is clicked in #blob-list */
function setInViewer(key) {
var store = getObjectStore(DB_STORE_NAME, 'readonly');
getBlob(key, store, function(blob) {
var iframe = newViewerFrame();
// Set a direct link to the blob to provide a mean to directly load it.
var blobURL = window.URL.createObjectURL(blob);
var myframe = document.getElementById("myframe");
myframe.setAttribute("src", blobURL);
window.URL.revokeObjectURL(blobURL);
});
}
openDB();
</script>