使用Javascript在新窗口中弹出图片

Question

使用Javascript在新窗口中弹出图片

3

我有一个网页，其中点击一个元素，使用JQuery post函数从服务器获取图像，并应在新窗口中显示，该窗口应调整为图像的大小。相关的Javascript函数如下（其中myImage是以base 64格式返回的图像）。

function showPicture(label) {
        var newWindow = window.open("", label,"scrollbars=0, toolbar=0");
        $.post( 'picture-view', { labelname: label },
        function(myImage) {
            newWindow.document.write("<img src='data:image/png;base64," + myImage + "'/>");
            newWindow.resizeTo(newWindow.document.getElementsByTagName("img")[0].width,     newWindow.document.getElementsByTagName("img")[0].height+newWindow.outerHeight-newWindow.innerHeight);
            newWindow.focus(); 

        }
    );          
}

有三件事情正在困扰我：

插入的图片在新窗口中有一个白色边框，我不知道如何去掉。
术语newWindow.outerHeight-newWindow.innerHeight用于调整窗口大小时应考虑工具栏等，但两者都输出为零。
这最后一点真的很烦人。如果我在从第四行开始的回调函数中放置代码行var newWindow = window.open("", label,"scrollbars=0, toolbar=0");，那么新窗口将被创建得太小，resizeTo函数也无法更改它的大小。

希望能提供任何建议或进一步阅读方向。

- elo96

你可以在img标签中添加 style="border:0;" 或者 border="0" 来设置边框。 - RTB

你考虑过使用页面中的 lightbox 解决方案吗？ - MikeM

@RTB：我以为边框已经被弃用了？ - elo96

@mdmullinmax：今天下午我一直在尝试（但失败了）做这件事，但认为这可能是一个更简单的方法。我同意Lightbox看起来更加流畅，可能会在下一个升级中尝试使用它。 - elo96

@elo96 嗯，style="border:0;" 应该有效并且绝对不会被弃用。同时，有效的HTML图片应该带有替代文本属性，如 alt=""。 - RTB

2个回答

0

您可以通过以下方式在新窗口中引用图像：

var img = $("img",newWindow.document)[0]; // Get my img elem

适应你的代码：

function showPicture(label) {
    var newWindow = window.open("", label,"scrollbars=0, toolbar=0");
    $.post( 'picture-view', { labelname: label },
    function(myImage) {
        newWindow.document.write("<body marginheight='0' marginwidth='0'><img src='data:image/png;base64," + myImage + "'/></body>");
        var img = $("img",newWindow.document)[0];
        newWindow.resizeTo($(img).width(), $(img).height());
        alert($(img).width()+","+$(img).height()); //Just to check values
        newWindow.focus(); 
    });          
}

我猜白色边框是由于body的margin，所以我添加了

<body marginheight='0' marginwidth='0'>

在

newWindow.document.write

将它们删除。

我在Firefox中测试了它并且它可以工作，但有时它会打开一个较小的窗口，可能是因为在整个图像加载完成之前就进行了调整大小。在这种情况下，您可以添加window.setTimeout来避免问题。

- user1498339

我遇到了较为不可预测的小窗口问题，我同意这可能是由于在加载图像之前进行调整大小所致。在这个问题的另一个答案中，建议我使用“onload”属性，这非常有效。 - elo96

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adeneo · Accepted Answer

您正在使用jQuery，因此您可以大大简化此过程，但由于您已经在许多地方使用纯JS，因此我继续使用它。

在打开新窗口之前，您应该等待图像加载完成，这样您就可以将大小设置为与图像相同，例如：

function showPicture(label) {
    $.post( 'picture-view', { labelname: label }, function(ImageSrc) {
       var myImage = new Image;
           myImage.src = "data:image/png;base64," + ImageSrc;
           myImage.style.border = 'none';
           myImage.style.outline = 'none';
           myImage.style.position = 'fixed';
           myImage.style.left = '0';
           myImage.style.top = '0';
           myImage.onload = function() {        
               var newWindow = window.open("", label,"scrollbars=0, toolbar=0, width="+myImage.width+", height="+myImage.height);
                   newWindow.document.write(myImage.outerHTML);
          }
    });
}

这里有一个FIDDLE，展示了如何完成此操作，我只是将base64添加到文件中，因为我没有时间创建某种虚假的Ajax函数。