appendChild dataURI 图像到 window.open 在 IE 中失败答案

【问题标题】：appendChild dataURI image to window.open failing in IEappendChild dataURI 图像到 window.open 在 IE 中失败
【发布时间】：2016-04-08 15:50:32
【问题描述】：

我正在尝试使用 dataURI 从交互式地图中抓取图像。然后将该图像附加到新的窗口布局以进行打印。

这适用于 Firefox 和 Chrome，但不适用于 IE11 或 Edge，它们都会引发错误。 IE：“层次请求错误” Edge：“不支持这样的接口”

This question 非常相似但未得到答复，所提供的解决方案与图像数据以外的对象相关。

我怀疑this method 可能有效，但我不知道如何为 URI 正确实现它。

当前代码在 FF 和 Chrome 中运行；

function screen(){

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

simg.src = dataURL;

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

mywindow.document.write('<!DOCTYPE html><head>');
mywindow.document.write('<link rel="stylesheet" href="./css/scr.css" type="text/css" />');
mywindow.document.write('</head><body>'); 
//add logos and legend here.
mywindow.document.write('</div></body></html>');
mywindow.document.body.appendChild(simg);

        if (is_chrome) {
            setTimeout(function () { 
                    mywindow.document.close();
                    mywindow.focus(); 
                    mywindow.print();  
                    mywindow.close();
            }, 600);
        } else {

    mywindow.document.close(); 
    mywindow.focus(); 
    mywindow.print();
    mywindow.close();       

    }
    return true;    
}

【问题讨论】：

标签： javascript internet-explorer window.open appendchild data-uri

【解决方案1】：

按照建议here，通过使用图像outerHTML 设置正文innerHTML 解决了这个问题。

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

【讨论】：