Question

我有几个 base64 编码图片。这些图片有一个点击事件处理程序，可打开一个新的窗口/标签，并将图像附加到新创建的窗口中。这在 Firefox （在3.6.x上测试）中完美无缺，但到目前为止所有 WebKit 浏览器都因为某种原因拒绝访问窗口对象

示例

jQuery('<img>', {
    src: "data:image/png;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAALAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D",
    click: function() {
        var largeprev = window.open('data:text/html;charset=utf-8,' + escape('<div/>'), 'large'),
            that      = this;

        largeprev.addEventListener('DOMContentLoaded', function(e) {
            largeprev.alert('loaded');
            largeprev.document.querySelectorAll('div')[0].appendChild(that);
        }, false);
    }
}).prependTo(document.body);

行动准则：http://www.jsfiddle.net/bM6uY/

我整整都弄乱了这一天。我需要通过传入带有text / html内容类型的 data-uri 来创建新窗口，以便在新窗口中有一些我可以附加图像的节点。这是必要的，因为如果你正在处理巨大的图像而你只是将 base 64 encoding 传递给 window.open（），所有这些数据都会进入< strong>网址栏，这会让事情变得非常沉重。

所以我有想法打开一个带有节点的新窗口并应用一些Javascript魔法来附加图像。

在FF中运行良好，但我找不到Chrome / Safari的解决方案。任何想法都赞赏。

更新

目前唯一的跨浏览器工作解决方案似乎是document.write()：

jQuery('<img>', {
    src: "data:image/png;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAALAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D",
    click: function() {
        var virtualdom = '<html><body><img src="' + this.src + '"/></body></html>',
            prev       = window.open('', 'large');

        prev.document.open();
        prev.document.write(virtualdom);
        prev.document.close();
    }
}).prependTo(document.body);

行动准则：http://www.jsfiddle.net/bM6uY/3/

Answer 1

使用将src属性设置为数据网址的图片打开空白html文档会不会更容易？

var data = "data:image/png;base64,RASSf4wwedfAAAA....",
    html= "<html><head> <title>Image Preview</title></head>"+
                "<body><img src='"+data+"'></img></body></html>",
    largePreview = open('');
largePreveiw.document.write(html);
largePreveiw.document.close();

使用HTMLDocument.write不是最好的，但我不认为有一个元素可以添加内容...

Answer 2

到目前为止，唯一的跨浏览器工作解决方案似乎是document.write（）：

jQuery('<img>', {
    src: "data:image/png;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAALAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D",
    click: function() {
        var virtualdom = '<html><body><img src="' + this.src + '"/></body></html>',
            prev       = window.open('', 'large');

        prev.document.open();
        prev.document.write(virtualdom);
        prev.document.close();
    }
}).prependTo(document.body);

Webkit：从window.open（）返回的访问DOMWindow对象

2 个答案: