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

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

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函数调整大小。

任何意见或指示，以进一步阅读将是非常有益的。

来源

2012-07-16 elo96

对于边框，您可以将'style =“border：0;”'或'border =“0”'添加到img标签。 – RTB 2012-07-16 14:56:58

您是否考虑过页内[lightbox]（https://www.google.com/#q=lightbox）解决方案？ – MikeM 2012-07-16 15:05:34

@RTB：我认为边界被弃用？ – elo96 2012-07-16 15:26:17

你正在使用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函数。

来源

2012-07-16 15:41:03 adeneo

谢谢你，完美的作品。我可以检查我对'onload'的理解吗？当我遇到'myImage.src = ...'这一行时，我是否正确地认为图像是从服务器检索的，并且在检索完成时调用onload？ – elo96 2012-07-17 07:26:26

不，在这种情况下并不是真的，因为图像在代码中（base64）。代码在'$ .post'函数中被检索，但为了获得正确的尺寸，图像需要在浏览器中加载。当使用javascript'新的Image'时，图像实际上被加载到浏览器中，而不管它是否可见，并且当图像在浏览器中加载完成时执行onload函数，然后您可以使用图像的实际尺寸。在加载图像之前，宽度和高度在大多数情况下不会返回任何内容或错误的值。 – adeneo 2012-07-17 10:07:27

您可以用这种方式引用图像在新窗口：

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 marginheight='0' marginwidth='0'>

newWindow.document.write

删除它们。

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

来源

2012-07-16 16:20:07 user1498339

小窗口问题发生在我身上有点不可预知，我同意这可能是由于图像加载之前调整大小。在对这个问题的另一个答案中，有人建议我使用非常好的'onload'属性。 – elo96 2012-07-17 07:25:19

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

回答

相关问题