ARTICLE AD BOX
Using JavaScript, I want to:
create a virtual file system
open a file contained within the file system, specifically an HTML document, in an iFrame
keep all links intact (including anchors, <link> tags, images, JS imports etc. linking to other files in the file system)
I don't want to have to parse the HTML myself and remap all the links to object or data URLs, as there are too many ways to reference files. Here's an example of what I'm after:
function preview(fileSystem, iframe) { /* ... */ } const fileSystem = { 'index.html': new File([` <!DOCTYPE html> <head> <link rel='stylesheet' href='styles/index.css'/> <title>Test</title> </head> <body> <img src='image.png' alt='Example image'> </body> `], { type: 'text/html' }), styles: { 'index.css': new File([/* ... */], { type: 'text/css' }) }, 'image.png': new File([/* ... */], { type: 'image/png' }) } preview( fileSystem, document.body.appendChild(document.createElement('iframe')) );Are there built-in APIs to handle this?
