Question

我正在尝试创建一个带有图像的弹出窗口，我希望弹出窗口与图像的宽高比相同。但我只知道image.onload上的图像尺寸。所以我需要的是一个在image.onload之后出现的弹出窗口。但浏览器将其视为不需要的弹出窗口并将阻止它。即使它是用户点击后的唯一弹出窗口。

我已尝试先创建弹出窗口并稍后更改内容并调整大小，但即使有效也会导致弹出窗口隐藏在后台，无法再将其恢复到前面（窗口上的镶边）

有没有办法确保用户点击的延迟弹出窗口仍为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()调整窗口大小点。

我建议您使用show-image.html甚至show-image.html?image=foo.bar等网址变量告诉show-image.html?foo.bar目标图片文件名。请注意，如果要使用此类方法，则应确保从URL中收集的变量中转义必要的字符，以避免使用XSS。

我使用jsFiddle创建了一个示例。该页面通过URL变量纯粹接受图片的URL以进行测试 - 您自己的实现不应包含此内容（在此页面上）。另请注意，我自然不包括对XSS或null检查的保护。

This是使用1920 x 1080目标图片的页面链接 This是使用800 x 600目标图片的页面链接。

请记住，为了查看图片的真正重新加载，您需要清除浏览器的缓存，以便再次加载图片。

Here您可以看到上述页面的来源。如果你想调整这个演示，我建议你把它保存到本地文档，因为jsFiddle的框架可以甩掉位置计算。

上面的页面提供了创建包含我创建的第二个页面的弹出窗口的方法。它通过URL将图像位置传递到第二页。如前所述，我建议您在第二页上确保给定的图像名称不会在您的网站之外引导（在此示例中有目的地省略了这些检查）。

Here是第一页创建弹出窗口的页面的来源。

如果您需要进一步说明或示例，请与我们联系。

图像上载后弹出

1 个答案: