Moving / Controlling a new window from a parent window using jquery

Question

I already found a question with a possible solution, but I already tried the proposed method before reading it, and it even says that it is inconsistent. So I think I'm wondering why this is not working:

$("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 img window to the same src as the image that the user clicked to open a new window. But in the above scenario, I'm just trying to enter a new window to get what is already installed - install src. I have imgwin.html already written by default src for the image, so it should warn the url about this. Instead, I just get undefined .

I also tried the following (which should be the same at 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 options for wrapping the imgwindow variable in $() , if some jquery did not collect this variable as a DOM element.

The only thing I can guess is that since window.open() is a method, jquery does not treat it as a DOM element, although all the documentation in the main javascript tutorials treats this variable as a window opening method and a pointer to the window's internal DOM .

Note:

I usually prefer and recommend that other developers use the jquery-ui dialog widget, but in this case the images are actually webcam channels that the user wants to pop out of the main window and open even if the main window is closed, so although I appreciate Switching from pop-ups in general, avoid offering alternatives that include single-window widgets. Thanks.

Answer 1

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. Tested only in Opera. imgwindow.document may not work for all browsers. At least I remember that there are problems for iframes where document / contentDocument and possibly other "identifiers" are needed to get the "document" of a new window / iframe. But just check in any browsers you need to support

Answer 2

why not just do it

 $("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, you 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 one, I like it !; -)

try the following:

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