He estado buscando en Google tratando de averiguar cómo cargar HTML, CSS y JS personalizados en Iframes, y el método más popular parece ser el uso de direcciones URL de blob, sin embargo, sigo recibiendo un error al no encontrar el archivo cuando uso este método.
Código para generar URL de blob
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'); }
Configuración de src de 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