使用jQuery遍历/操作父窗口的新窗口

Question

我发现一个问题，已经有可能的解决方案了，但在阅读之前我已经尝试过建议的方法，甚至说这个方法是不一致的。所以我想知道为什么这个方法不起作用：

$("img").click(function() {
    var imgwindow = window.open('imgwin.html','','width=460,height=345');
    alert(imgwindow.find("img").attr("src"));
});

目标是将新窗口的设置为用户单击以打开新窗口的图像相同的。但在上述情况下，我只是尝试进入新窗口以获取其已设置的src。我已经编写了imgwin.html的默认src，因此它应该警报该URL。但是，我只得到undefined。

我还尝试了以下操作（在后端应该是相同的），但结果相同：

$("img").click(function() {
    var imgwindow = window.open('imgwin.html','','width=460,height=345');
    alert($("img",imgwindow).attr("src"));
});

我甚至尝试了将imgwindow变量用$()包装的各种变化，以防万一jquery没有将变量作为DOM元素捕获。

我唯一能猜测的是，由于window.open()是一个方法，所以jquery不会像DOM元素那样对待它，即使所有基本javascript教程的文档都将该变量视为打开窗口的方法和指向窗口内部DOM的指针。

注意：

通常我更喜欢并建议其他开发人员使用jquery-ui对话框小部件，但在这种情况下，图像实际上是网络摄像头提供的，用户将希望将其弹出到主窗口之外，并且即使关闭主窗口也保持打开状态，因此虽然我感谢一般情况下避免弹出窗口的移动，但请避免建议涉及同一窗口小部件的替代方案。谢谢。

- Anthony

Answer 1

为什么不直接这样做？

$("img").click(function(e) {
var src = $(this).attr('src');
window.open(src,'','width=460,height=345');
});

这将打开一个新窗口，其中包含您的图像！;-)

更新

针对您的评论，需要执行以下操作：

$("img").click(function(e) {
//Load content in your page and hide it...
$('#result').load('imgwin.html').hide();
//find the image you want...
 alert($('#result').find("img").attr("src"));
//remove it from your page..
$('#result').remove();
});

更新2

好的，我们还在继续进行，我很喜欢这个！;-)

试试这个：

var reg = /src=\"(.+[\.jpg|\.jpeg|\.png|\.gif])\"/;  
var imgwindow = $.ajax({type: "GET", url: "imgwin.html", async: false  }).responseText;
var img = imgwindow.match(reg)[1];
alert(img);

- Luca Filosofi

---

我考虑过这个问题，但我需要将其他HTML嵌入到新窗口中，以便如果父窗口关闭，新窗口有自己的控件。我很困惑为什么找不到任何解决方案来实现这一点。感谢您的反馈。 - Anthony

这是一个狡猾的解决方法。我必须承认它很聪明。但是我尽可能避免隐藏，我认为Jitter可能触及了我困惑的真正来源。对于创意加一分。 - Anthony

Answer 2

快速且简单

var src = '';
var imgwindow;
$(function() {
  $("img").click(function() {
    imgwindow = window.open('urlto.html','','width=460,height=345');
    src = this.src;
    //delay needed as I couldn't manage to get ready/load events to work on the
    //imgwindow.document object
    //thus the snippet is dirtier then need with all those "global" variables
    setTimeout('$("img", imgwindow.document.body).attr("src", src)', 1000);
  });
});

注意：仅在Opera中测试过。imgwindow.document可能不适用于所有浏览器。至少我记得在iframe中存在问题，需要使用document/contentDocument和其他“标识符”才能获取新窗口/iframe的“文档”。但是，请在您需要支持的任何浏览器中进行测试。

- jitter

---

我还在努力消化你的回答，但我认为你所提到的延迟问题可能是我困惑的真正原因。我之前得到 undefined 的原因是因为当警告出现时，新窗口尚未加载。当然！我会测试这个理论，并在确认后发布最终更新。 - Anthony