appendChildデータIE内の他のオブジェクトを置き換えるURI

投稿者this私は最終的には、IE内で表示するデータURIを取得することができました。appendChildデータIE内の他のオブジェクトを置き換えるURI

私はこれが今ちょうど私がそれを正しく実装に失敗している疑いがある。..

これは私の完全な「スクリーン印刷レイアウトに」関数です。

問題は、データの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;  
}

出典

2016-04-26 benj

IEスロー例外HierarchyRequestErrorあなたがクロスドキュメント要素を追加しようとすると、これを試してみてください。私は以前に解決しようとした問題だ

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

出典

2016-04-26 13:56:00 jcubic

mywindow.document.body.innerHTML = simg.outerHTML。それを解決するように見えましたが、私は表示したい他の要素を置き換えます。あなたの提案は最初に機能しましたが、今はそれを繰り返すことはできません！ – benj

奇妙な動作.. IEはキャッチされていないエラーを報告したので、私はキャッチを追加しました。まっすぐそれをして、ページをリロードした後、それは働いた。しかし、それ以降の試行はエラーが発生しないで失敗しました（画像なし）。 – benj

appendChildデータIE内の他のオブジェクトを置き換えるURI

答えて

関連する問題