Fred J. Fred J. - 11 months ago 58
HTML Question

Create a DOM from raw html and place it in a new window

This Meteor client code tries to open new tab and place raw html in it.

It opens a blank page. How can it be fixed so that it displays the html?

let imgDataURL = $('canvas.signature').get(0).toDataURL(); //earlier in the code

let w =;
let parser = new DOMParser();
let doc = parser.parseFromString(html, "text/html");
w.document = doc;

//need to append.child a canvas with imgDataURL to a ('td.sign') element in doc

The reason I am doing it this way is that I need a reference to the DOM
so that I can modify it in a way that is not possible with the raw html, like appending a canvas and load it with an image which was previously created via


Alternatively you could manipulate the DOM of the opened window without using DOMParser at all. E.G. to insert a signature image (an "X") at the end of an element with an id "sig" (a table cell):

let html="<table><tbody><tr><td id='sig'>signed: </td></tr></tbody></table>";
let sigURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAVUlEQVQ4jbXSSQ4AIAgDwP7/03hVbFlcuLaZgBF2OXgKADCgZ1IgQ+ZcAgrx2daKAJaFwFIUMN3TI+FW9FCB0N4X4PgEVs6Q0kdqA5WzwjdQcw2wLQdGmRkSdmO7XQAAAABJRU5ErkJggg=="

  let w =;
  let doc = w.document;
  let sigImg = new Image();
  sigImg.src = sigURL;