Display HTML with embed tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>  
  <embed type="text/html" id="response" scrolling="no" style="height: 640px; width:100%;">
</body>
</html>
(async function() {
  const embedResponse = document.getElementById('response');
    try {
      // clean content first     
      embedResponse.setAttribute('src', 'data:text/html;charset=utf-8,');
      const response = await fetch('/api/response',
        {
          method: 'post',
          // accept HTML response
          headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
          },
          // sent data if needed
          body: JSON.stringify({data: ''})
        });

      // encode HTML response
      const html = await response.text();
      embedResponse.setAttribute('src', 'data:text/html;charset=utf-8,' + encodeURIComponent(html));

    } catch (e) {
      // catch errors and show them
      embedResponse.setAttribute('src', 'data:text/html;charset=utf-8,' + encodeURIComponent(e));
      console.error(e);
    }
 })();

There is another option, you can display HTML in new window as blob data:

const content = URL.createObjectURL(new Blob([response.data + overlay || ''], {type: "text/html"}));
window.open(content, "response", `width=640, height=480`).focus();

#javascript#webdesign#2021

•raw•edit