Question

我正在编写一个脚本，用于查找<a href='image_url'>...</a>类型的链接，其中image_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

上

Answer 2

问题更新后不再是解决方案。

<击> 这是一个可能的解决方案

CSS

.image { width: 50px; height: auto; }

HTML

<img class="image" src="http://img145.imageshack.us/img145/1750/barcelonaagbartowernighnx7.jpg" /> <img class="image" src="http://img515.imageshack.us/img515/5390/005cc0.jpg" /> <img class="image" src="http://imageshack.us/a/img708/9470/compatiblechrome.gif" />

的Javascript

(function (global) { global.addEventListener("load", function onLoad() { global.removeEventListener("load", onLoad); Array.prototype.forEach.call(document.getElementsByTagName("img"), function (image) { var newImg = document.createElement("img"); newImg.src = image.src; image.addEventListener("click", function () { global.open(image.src, "image", "width=" + newImg.width + "px,height=" + newImg.height + "px"); }, false); }); }, false); }(window));

在jsfiddle
上
<击>

在弹出窗口中打开图像：如何在加载图像时获取其大小？

2 个答案: