使用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在新窗口中彈出圖像

回答

相關問題