Append content to new browser window from the parent page
<p>I am trying to integrate a cropping tool to my website (js plugging <a href="http://tympanus.net/codrops/2014/10/30/resizing-cropping-images-canvas/" rel="nofollow">resizing cropping images canvas</a>). This tool will let the user crop an image, open it in a new browser page, and give him the capacity to save the new image into the disk.</p>

<p>The cropping code is as following:</p>

<pre><code>crop = function(){
    //Find the part of the image that is inside the crop box
    var crop_canvas,
    left = $('.overlay').offset().left - $container.offset().left,
    top =  $('.overlay').offset().top - $container.offset().top,
    width = $('.overlay').width(),
    height = $('.overlay').height();

    crop_canvas = document.createElement('canvas');
    crop_canvas.width = width;
    crop_canvas.height = height;

    crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
    var newWindow = window.open(crop_canvas.toDataURL("image/png"));
}
</code></pre>

<p>Now i want to append some HTML content to newWindow body, but it does not work. I tried to add the following after <code>window.open</code> command:</p>

<pre><code>var text = document.createTextNode('Hello World !');
newWindow.document.body.appendChild(text);
</code></pre>

<p>But nothing is added to the new page ? </p>

<p>How can add stuff to the body of the new page using the script from the parent page ? (Html content and even some javascript code)</p>

<p>Thanks!</p>