1

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

我曾尝试先创建弹出窗口，然后再更改内容和大小，但即使这样，有时也会导致弹出窗口隐藏在后台，无法再次将其恢复到前面（windows上的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);
        }
    }
4

1 回答 1

1

如果您的弹出窗口loading.gif 正在显示，那么浏览器可能不喜欢您一键打开两个弹出窗口。

您可以尝试打开一个弹出窗口show-image.html，您可以在其中显示加载图像，同时计算目标图像的大小，然后在window.resizeTo()知道尺寸后使用调整窗口大小。

我建议show-image.html通过使用 URL 变量来告诉目标图像文件名，show-image.html?image=foo.bar甚至show-image.html?foo.bar. 请注意，如果您要使用这种方法，您应该确保从从 URL 收集的变量中转义必要的字符，以避免 XSS。

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

这是指向页面的链接，使用 1920 x 1080 目标图像。
这是指向页面的链接，使用 800 x 600 目标图像。

请记住，为了看到图像的真正重新加载，您需要清除浏览器的缓存才能再次加载图像。

在这里您可以看到上述页面的来源。如果您想调整此演示，我建议您将其保存到本地文档，因为 jsFiddle 的框架可能会影响位置计算。

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

这是第一个页面正在创建弹出窗口的页面的来源。

如果您需要进一步的说明或示例，请告诉我。

于 2012-07-20T11:30:54.797 回答