I've been Googling around trying to find out how to load custom HTML, CSS, and JS into Iframes, and the most popular method seems to be using blob URLs, however I keep getting an failed to find file error when using this method.
Code for generating blob url
function getGeneratedPageURL(html, css, js){
const getBlobURL = (code, type) => {
const blob = new Blob([code], { type })
return URL.createObjectURL(blob)
}
const cssURL = getBlobURL(css, 'text/css')
const jsURL = getBlobURL(js, 'text/javascript')
const source = `
<html>
<head>
${`<link rel="stylesheet" type="text/css" href="${cssURL}" />`}
</head>
<body>
${html}
${`<script src="${jsURL}"></script>`}
</body>
</html>
`
return getBlobURL(source, 'text/html');
}
Setting src of Iframe
window.api.receive("render_server", (res) => {
res.forEach(res_obj => {
let blob = res_obj[0].blob[0];
let box_cont = document.createElement("div");
box_cont.classList.add("box");
let div_frame_overay = document.createElement("div");
div_frame_overay.classList.add("frame_overlay");
div_frame_overay.dataset.dragable = "true";
let i_frame = document.createElement("iframe");
i_frame.setAttribute("onload", 'javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px"; o.style.width=o.contentWindow.document.body.scrollWidth+"px";}(this));')
i_frame.setAttribute("frameBorder", 0);
i_frame.src = blob;
box_cont.appendChild(div_frame_overay);
box_cont.appendChild(i_frame)
document.querySelector(".grid").appendChild(box_cont);
})
});
Error
(node:11544) electron: Failed to load URL: blob:file:///f3f5be05-fde8-4e4f-aefe-8c61c6690b4b with error: ERR_FILE_NOT_FOUND