彈出後圖像onload

Question

我想創建一個彈出式窗口，其中的圖像，我希望彈出與圖像相同的長寬比。但我只知道image.onload上的圖像尺寸。 所以我需要的是在image.onload之後的彈出窗口。但是，瀏覽器將其視爲不需要的彈出窗口，並會阻止它。即使它是用戶點擊後的唯一彈出窗口。

我曾嘗試創建彈出窗口，並稍後修改內容和尺寸，但即使在工作時它有時也會導致彈出窗口隱藏在背景中，無法將其重新放回到前端（窗口上的chrome ）

有沒有辦法確保延遲彈出仍然hooked到用戶的點擊？ 或其他一些建議。

，我想有代碼的工作：

    selectURL: function(url) { 
     // Check for images, otherwise just simply open the file by the browser. 
     if(url.match(/(jpe?g|png|gif|bmp)$/gim)) { 
      // Check if colorbox exists and use if so. 
      if($.colorbox) { 
       $.colorbox({ 
        maxWidth:'80%', 
        maxHeight:'80%', 
        fixed: true, 
        scrolling: false, 
        href: url, 
        open: true, 
        photo: true 
       }); 
      } else { 
       // New image object so we can calculate the required popup size on load 
       var myImage = new Image(); 
       myImage.src = url; 
       // Close current window to make sure focus works 
       if(typeof(popupWindow) !== 'undefined') { 
        popupWindow.close(); 
       } 
       // Temporary loading image 
       popupWindow = window.open('/images/loading.gif','popupWindow','height=400,width=600,resizable=no,scrollbars=no,top=200,left=200'); 
       if (window.focus) { 
        popupWindow.focus(); 
       } 
       // Calculator and actual image opener :) 
       myImage.onload = function() { 
        var maxWidth = 600, 
         maxHeight = 600; 
        // Close existing popup 
        if(typeof(popupWindow) !== 'undefined') { 
         popupWindow.close(); 
        } 

        if(this.width < maxWidth && this.height < maxHeight) { 
         popupWindow = window.open(this.src,'popupWindow','height='+this.height+',width='+this.width+',resizable=no,scrollbars=no,top=200,left=200'); 
        } else if(this.width === this.height) { 
         popupWindow = window.open(this.src,'popupWindow','height='+maxHeight+',width='+maxWidth+',resizable=yes,scrollbars=yes,top=200,left=200'); 
        } else if(this.width < this.height) { 
         popupWindow = window.open(this.src,'popupWindow','height='+maxHeight+',width='+(maxHeight/this.height * this.width)+',resizable=yes,scrollbars=yes,top=200,left=200'); 
        } else { 
         popupWindow = window.open(this.src,'popupWindow','height='+(maxWidth/this.width * this.height)+',width='+maxWidth+',resizable=yes,scrollbars=yes,top=200,left=200'); 
        } 
        if (window.focus) { 
         popupWindow.focus(); 
        } 
       } 
      } 
     } else { 
      window.open(url); 
     } 
    } 

Answer 1

如果包含loading.gif您的彈出窗口是的表現，那麼或許該瀏覽器不喜歡你打開彈出窗口與一個點擊。

你可以嘗試打開一個彈出來show-image.html，在其中您可以顯示加載圖像，同時計算出目標圖像的大小，然後調整使用window.resizeTo()窗口，一旦你知道的尺寸。

我建議通過使用URL變量（如show-image.html?image=foo.bar或甚至show-image.html?foo.bar）告訴show-image.html目標圖像的文件名。請注意，如果您要使用此類方法，則應確保從您從URL收集的變量中轉義必要的字符以避免XSS。

我創建了一個使用jsFiddle的例子。該頁面通過一個URL變量純粹爲接受圖片的URL用於測試目的 - 您自己的實現不應包含此內容（在此頁面）。另請注意，我自然不包含XSS保護或null檢查。

This是使用1920 x 1080目標圖像的頁面鏈接。
This是使用800 x 600目標圖片的頁面鏈接。

請記住，爲了看到真實的re加載圖像，您需要清除瀏覽器的緩存以便再次加載圖像。

Here您可以看到上述頁面的來源。如果你想調整這個演示，我建議你將它保存到本地文檔，因爲jsFiddle的框架可以拋出位置計算。

上述頁面提供了創建包含我創建的第二頁的彈出窗口的方法。它通過URL將圖像位置傳遞到第二頁。如前所述，我建議在第二頁上確保給定的圖像名稱不會超出您的網站（在本例中有意省略這些檢查）。

Here是第一頁創建彈出窗口的頁面的源代碼。

如果您需要進一步的說明或示例，請告訴我。