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

我正在编写一个脚本，用于查找

类型的链接，其中image\u 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来显示图像（出于其他原因）

---

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

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

这里有一个可能的解决方案

CSS

HTML

在

---

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

这里有一个可能的解决方案

CSS

HTML

在

---

这是一个基于您最新问题的解决方案

HTML

---

在

上，以下是基于您更新的问题的解决方案

HTML

---

---

在

首先，简单阅读一下：您的代码是从扩展或Greasemonkey等注入到页面中，还是与网页一起提供javascript？谢谢。html文件底部包含的javascript代码。您正在尝试获取图像的原始大小还是显示/计算大小？我正在尝试获取图像的原始大小。然后，我会将弹出窗口的大小调整为+几个像素。首先，稍微轻读一下：您的代码是从扩展或Greasemonkey之类的工具注入到页面中的，还是您的javascript与网页一起提供的？谢谢。html文件底部包含的javascript代码。您正在尝试获取图像的原始大小还是显示/计算大小？我正在尝试获取图像的原始大小。然后，我会将弹出窗口的大小调整为+几个像素。非常感谢。我正在寻找一种截取标签的方法，而不是截取图像本身，但我想你的解决方案只需稍作修改就可以适用于这种情况。但是，问题是，我希望在用户实际单击链接之前避免在主页中加载图像（我希望用户只访问页面上的几个链接）…给我一个标记示例，将其添加到您的问题中，因为不清楚您需要什么，“我正在编写一个脚本，用于查找指向图像的链接，并添加一个onclick”对此表示抱歉。我相应地更新了问题。更准确地说，问题不是如何找到要更改的元素，而是如何获得要调整弹出窗口大小的维度。同样，我可以问以下问题（可能更简单）问题：我有一个img_url变量，它包含图像的url（还没有加载到任何地方）我想打开一个直接加载图像的弹出窗口，而不是一些显示图像的HTML代码。但我希望弹出窗口的大小正确。非常感谢。我正在寻找一种截取标记的方法，而不是截取图像本身，但我想你的解决方案只需稍加修改即可应用于这种情况。然而，问题是我希望避免在用户实际单击链接之前加载主页中的图像（我希望用户只访问页面上的几个链接）…给我一个标记示例，将其添加到您的问题中，因为不清楚您需要什么，“我正在编写一个脚本，查找图像链接并添加onclick“对不起。我相应地更新了问题。更准确地说，问题不是如何找到要更改的元素，而是如何获得我想要调整弹出窗口大小的维度。同样，我可以问以下（可能更简单）问题：我有一个img_url变量，它包含图像的url（还没有加载到任何地方），我想打开一个直接加载图像的弹出窗口，而不是一些显示图像的HTML代码。但是我希望弹出窗口的大小正确。非常感谢。除了弹出窗口现在被我的浏览器阻止（第一个版本不是这样），它就像一个符咒，直接调用“window.addEventListener”似乎更简单。使这个代码块成为一个以“window”为参数的函数的动机是什么？只是我拥有的一个模板。我有一个没有太多，但这得到了点击，一定要改变全局窗口，并删除它的属性。非常感谢。除了弹出窗口现在被我的浏览器阻止（第一个版本不是这样），它就像一个符咒，直接调用“window.addEventListener”似乎更简单。使这个代码块成为一个以“window”为参数的函数的动机是什么？只是我拥有的一个模板。我有一个没有太多，但这得到了点击，一定要改变全局窗口，并删除它的属性。

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

<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" />

(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));

<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>

(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);
}());