appendChild 数据 URI 替换 IE 中的其他对象答案

【问题标题】：appendChild data URI replacing other objects in IEappendChild 数据 URI 替换 IE 中的其他对象
【发布时间】：2016-04-26 13:27:31
【问题描述】：

继this 之后，我终于设法让数据 uri 显示在 IE 中，现在让它替换文档中的其他对象。

我怀疑这只是我没有正确实施它..

这是我的全屏“打印布局”功能。

问题是现在数据 uri 图像正在替换徽标和图例。它应该坐在他们后面。到目前为止，我已经尝试将 uri 图像 z-index 设置为 -1，以防它覆盖而不是替换其他对象。但是，我怀疑我实际上是用 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;    
}

【问题讨论】：

标签： javascript internet-explorer append window.open

【解决方案1】：

当你尝试追加跨文档元素时，IE 抛出异常 HierarchyRequestError，试试这个：

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

【讨论】：

这就是我之前尝试解决的问题 mywindow.document.body.innerHTML = simg.outerHTML;似乎解决了它，但现在替换了我想要显示的其他元素。你的建议第一次确实有效，但我现在不能重复了！
奇怪的行为.. IE 报告了一个未捕获的错误，所以我添加了捕获。在这样做并重新加载它工作的页面之后直接。但是，随后的每次尝试都失败了（没有图像），没有抛出任何错误。