appendChild data URI replacing other objects in IE

Question

Following from this i finally managed to get the data uri to display in IE only to now have it replacing other objects within the document.

I suspect this is now just me failing to implement it properly..

This is my full 'screen to print layout' function.

The problem is that now the data uri image is replacing the logo and legend. It should sit behind them. So far i have tried setting the uri image z-index as -1 in case it was overlaying rather than replacing the other objects. However, i suspect i am actually removing them with body.innerHTML = simg.outerHTML.

function screen(){

//hsl color value from mapbox gl feature layer.
var DesSiteColor = map.getPaintProperty('CBA Designated Sites','fill-color');
var CBACoastColor = map.getPaintProperty('CBA Coastal','fill-color');
var CBAGrassColor = map.getPaintProperty('CBA Grassland','fill-color');
var CBAHeathColor = map.getPaintProperty('CBA Heathland','fill-color');
var CBAWetColor = map.getPaintProperty('CBA Wetland','fill-color');
var CBAGeoColor = map.getPaintProperty('CBA Geological','fill-color');
var CBAWoodColor = map.getPaintProperty('CBA Woodland','fill-color');
var LineLineColor = map.getPaintProperty('Linear features (line)','fill-color');
var LineRegionColor = map.getPaintProperty('Linear features (region)','fill-color');
var StepColor = map.getPaintProperty('Stepping Stone','fill-color');
var NIAColor = map.getPaintProperty('Nature Improvement Area','fill-color');

var simg = new Image();
var dataURL = map.getCanvas('#map').toDataURL();

simg.id = 'simg';
simg.src = dataURL;
//console.log(simg.id);
//console.log(simg);

var mywindow = window.open('','Print','height=800,width=900');
var is_chrome = Boolean(mywindow.chrome);

    mywindow.document.write('<!DOCTYPE html><head><title></title>');
    mywindow.document.write('<link rel="stylesheet" href="./css/scr.css" type="text/css" />');
    mywindow.document.write('</head><body>');
    mywindow.document.write('<img class="limg" src="./img/logo.png" />');
    mywindow.document.write('<div class="locbox">Map Centre: '+clatlng+cgr+'</div>');
    //use conversion function to change hsl values to hex for browser compatability.
    mywindow.document.write('<div class="container"><div class="my-legend"><div class="legend-title">Legend</div><div class="legend-scale"><ul class="legend-labels">');    
    mywindow.document.write('<li><span style=background:'+color2color(DesSiteColor,"hex")+'></span>CBA Designated Sites</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBACoastColor,"hex")+'></span>CBA Coastal</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBAGrassColor,"hex")+'></span>CBA Grassland</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBAHeathColor,"hex")+'></span>CBA Heathland</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBAWetColor,"hex")+'></span>CBA Wetland</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBAGeoColor,"hex")+'></span>CBA Geology</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBAWoodColor,"hex")+'></span>CBA Woodland</li>');
    //mywindow.document.write('<li><span style=background:'+color2color(LineLineColor,"hex")+'></span>Linear features (line)</li>');
    mywindow.document.write('<li><span style=background:'+color2color(LineRegionColor,"hex")+'></span>Linear features</li>');
    mywindow.document.write('<li><span style=background:'+color2color(StepColor,"hex")+'></span>Stepping Stone</li>');
    mywindow.document.write('<li><span style=background:'+color2color(NIAColor,"hex")+'></span>NIA</li></ul></div>');
    mywindow.document.write('<div class="legend-source">Source: <a href="http://www.activenaturalist.org.uk/lcren/">LCR EN</a></div></div>');
    mywindow.document.write('</div></body></html>');

    try{
    mywindow.document.body.appendChild(simg);
    }
    catch(e){
    if (simg.outerHTML) {
    mywindow.document.body.innerHTML = simg.outerHTML;
    }
    else {
            //console.log('not working');
    }
    }

        if (is_chrome) {
            setTimeout(function () { // wait until all resources loaded 
                    mywindow.document.close();
                    mywindow.focus(); 
                    mywindow.print();  // change window to winPrint
                    mywindow.close();// change window to winPrint
            }, 600);
        } else {

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10
    mywindow.print();
    mywindow.close();       

    }
    return true;    
}

score 0 · Answer 1 · answered Apr 26 '16 at 13:56

0

IE throw exception HierarchyRequestError when you try to append cross document elements, try this:

var mywindow = window.open('','Print','height=800,width=900');
var simg = new mywindow.Image();
mywindow.document.body.appendChild(simg);

answered Apr 26 '16 at 13:56

jcubic

61,973
54
229
402

That's the problem i tried to resolve previously the mywindow.document.body.innerHTML = simg.outerHTML; appeared to solve it but now replaces the other elements i wanted to display. your suggestion did just work first time but i now can't repeat it! – benj Apr 26 '16 at 14:22
Weird behaviour.. IE reported an uncaught error so i added the catch. Straight after doing that and reloading the page it worked. However, each subsequent attempt then failed (no image) with no errors thrown. – benj Apr 26 '16 at 14:42

appendChild data URI replacing other objects in IE

1 Answers1