Traversing/Manipulating new window from parent window with jquery

Question

I found a question already with a possible solution, but I had already tried the method suggested before reading it, and it even says it's inconsistent. So I guess I'm wondering why this doesn't work:

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

The goal is to set the new window's img to the same src as the image that the user clicked to open the new window. But in the above scenario, I'm just trying to tap into the new window to get what it's already-set src. I have imgwin.html already written with a default src for the image, so it should alert that url. Instead I just get undefined.

I also tried the following (which should be identical on the back end), but with the same results:

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

I even tried variations of wrapping the imgwindow variable in $() in case somehow jquery wasn't picking up on the variable as a DOM element.

The only thing I can guess is that since window.open() is a method, jquery doesn't treat it like a DOM element, even though all documentation from basic javascript tutorials treat the variable as both a method to open the window and the pointer to the window's inner DOM.

Note:

I usually prefer and recommend to other developers the use of the jquery-ui dialog widget, but in this scenario, the images are actually webcam feeds that the user will want to pop out of the main window and have open even if the main window is closed, so while I appreciate the move from popup windows in general, please avoid suggesting alternatives that involve same-window widgets. Thanks.

Answer 1

why not just do this

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

This will open a new window with your image inside! ;-)

UPDATE

In response to your comment, need to do something like this:

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

UPDATE 2

ok, still on this, i like it! ;-)

try this:

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

Answer 2

Quick and dirty

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

Note: Only tested in Opera. imgwindow.document might not work for all browsers. At least I recall there being problems for iframes where document/contentDocument and maybe others "identifiers" are needed to get the "document" of the new window/iframe. But just test in any browsers you need to support