appendChild data URI ersetzen andere Objekte in IE

Nach this schließlich gelang es mir, die Daten URI in IE anzuzeigen, nur um es jetzt andere Objekte innerhalb des Dokuments zu ersetzen.appendChild data URI ersetzen andere Objekte in IE

Ich vermute, das ist jetzt nur versagen ich, es richtig zu implementieren ..

Das ist mein voller ‚Bildschirm-Layout drucken‘ -Funktion.

Das Problem ist, dass jetzt das Daten-URI-Bild das Logo und die Legende ersetzt. Es sollte hinter ihnen sitzen. Bisher habe ich versucht, den URI-Bild-Z-Index als -1 zu setzen, falls er überlagert wurde, anstatt die anderen Objekte zu ersetzen. Allerdings vermute ich, dass ich sie tatsächlich mit body.innerHTML = simg.outerHTML entferne.

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;  
}

Quelle

2016-04-26 benj

IE throw Ausnahme HierarchyRequestError, wenn Sie Querdokumentelemente anhängen versuchen, versuchen Sie dies:

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

Quelle

2016-04-26 13:56:00 jcubic

Das ist das Problem, das ich vorher zu lösen versucht, die mywindow.document.body.innerHTML = simg.outerHTML; schien es zu lösen, aber ersetzt jetzt die anderen Elemente, die ich anzeigen wollte. Ihr Vorschlag hat nur zum ersten Mal funktioniert, aber ich kann es jetzt nicht wiederholen! – benj

Sonderbares Verhalten .. IE meldete einen nicht erfassten Fehler, also fügte ich den Fang hinzu. Gleich danach und nach dem Laden der Seite funktionierte es. Jeder nachfolgende Versuch scheiterte jedoch (kein Bild) ohne Fehler. – benj

appendChild data URI ersetzen andere Objekte in IE

Antwort

Verwandte Themen