javascript - 在弹出窗口中打开图像 : how to get its size when the image is loaded?

Question

我正在编写一个脚本来查找此类链接 <a href='image_url'>...</a> ，其中 image_url 是图像的 url，然后向这些标签添加 onclick='popupImage(this)'属性给它们，打开一个显示图像的弹出窗口。我知道如何查找这些标签，我的问题是关于编写 popupImage 函数。到目前为止，我已经

function popupImage(link){
    window.open(link,'image','width=400,height=400'); 
}

这工作得很好，但我想在加载后调整弹出窗口的大小以适应图像。因此，我可能需要类似的东西

function popupImage(link){
    w=window.open(link,'image','width=400,height=400');
    w.onload = function(){
        ... Do something to get the size of the image...
        ... Resize the popup (this, I know how to do)...
    }
}

但是我不知道如何访问窗口加载的图像，因为它没有 DOM...问题是我真的不想在弹出窗口中写入一些 HTML 来显示图像(对于其他一些原因)。

任何建议将不胜感激。提前致谢!

Answer 1

这是根据您更新的问题提供的解决方案

HTML

<a href="http://img145.imageshack.us/img145/1750/barcelonaagbartowernighnx7.jpg">One</a>
<a href="http://img515.imageshack.us/img515/5390/005cc0.jpg">Two</a>
<a href="http://imageshack.us/a/img708/9470/compatiblechrome.gif">Three</a>

Javascript

(function () {
    window.addEventListener("load", function onLoad() {
        this.removeEventListener("load", onLoad);

        Array.prototype.forEach.call(document.getElementsByTagName("a"), function (anchor) {
            anchor.addEventListener("click", function (evt) {
                evt.preventDefault();

                var newImg = document.createElement("img");

                newImg.src = anchor.href;
                newImg.addEventListener("load", function imgLoad() {
                    this.removeEventListener("load", imgLoad);

                    window.open(newImg.src, "image", "width=" + newImg.width + "px,height=" + newImg.height + "px");
                }, false);
            }, false);
        });
    }, false);
}());

关于jsfiddle