CODEWITHSUNDEEP
javascriptelectronbloburls
unknown
unknown

Reputation: 21

File not found error when setting Iframe source to a blob url

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

Upvotes: 2

Views: 454

Answers (0)

Related Questions