追加子数据 URI，替换 IE 中的其他对象

appendChild data URI replacing other objects in IE

本文关键字：其他 对象 IE 替换 数据 URI 追加      更新时间：2023-09-26

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

我怀疑现在这只是我没有正确实施它。

这是我完整的"屏幕打印布局"功能。

问题是现在数据 uri 图像正在替换徽标和图例。它应该坐在他们身后。到目前为止，我已经尝试将 uri 图像 z 索引设置为 -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;    
}

IE 在尝试附加跨文档元素时抛出异常 HierarchyRequestError，请尝试以下操作：

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