I'm currently setting up a web page that use IndexedDB to display html documents in an iframe in this page. This documents are already in the database as blobs. Also, I want to have this web page working online as well as offline. I used a code from MDN to help me start with all this.
Now, I am displaying one document at a time by creating a url pointing to the blob and putting it in the src attribute of the iframe. The html documents are displaying well, but because css and javascript files are linked in the html source with urls like "localhost:8080/my_css.css", I'm currently using CSS/JS and images stored on my server, and it will not be helpful once I'll be offline.
My question is : is there a way (quite simple if it is possible) to bind CSS/JS/images stored in the database to the html documents without modifying the html code of this documents to display them perfectly in the iframe ? I think I could use Application Cache API to store locally the files I need, but because there could be lots of CSS and JS files, I'd rather use a way with the IndexedDB API.
Thanks a lot for your answers !
What my HTML looks like, if it can help :
<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>