Window control

I’m developing a site where you can click on a thumbnail of a company logo, which pops up a window containing some additional information about that company. This popup window is devoid of features - no scrolling, resizing, buttons, etc. Trying to keep it small.

Within this popup window is a link to the company’s website. When clicked, I’d like to have one of two things happen. Either would do.

Either that popup window magically changes to a normal browser window - larger, scrollable, resizable, buttons, etc.

or…

When the link is clicked, that window closes and the company’s website is opened in a newly created fully-functioning browser window, so that the original web page stays available.

Is this possible?

Thanks in advance for any help. And fwiw… my javascript skills are rudimentary.

You can have the popup window tell the original web page to navigate somewhere else with:


window.opener.location = '...';

After which you can close the popup window:


window.close();

But I don’t want that original window to go elsewhere. I want the new customer’s page to open in a new window (or tab).

In that case, after your popup tells the parent to navigate wher you need to go, close the popup with:


self.close();

I’m sorry if I’m misunderstanding you, but the critical part to all of this is that the parent MUST NOT navigate anywhere else. That page MUST remain. I need a new browser window to open. NOT the parent.

Then just open a new window to where you need it to go.

That’s what I’m unable to do. I can open a new window leaving the small popup window open, but I don’t want that. I want the popup window to close.

I’ve tried this code in the popup window:

<a href="newpage.html" target="blank" onClick="javascript:self.close();"><img src="popupwindowimage.jpg"></a>

…but this simply closes the popup window and doesn’t open a new window with newpage.html.

if I understand correctly, this is the scenario

window A

contains logo thumbnails that are links to more info for that company.

when a thumbnail is clicked a new window (window B) opens with more info for that company

window B

is fixed-size, non scrollable etc and contains a link to the conpany’s actual website.

when the link in window B is clicked, a 3rd fully featured window opens displaying the company’s website and window B closes

if the above is correct then in window B

  1. use window.open() to first open the 3rd window displaying the company’s website

  2. then immediately run self.close() to close window B

Ahh, I see the problem, you’re using inline scripting events which dramatically limit what you can do.

Instead, use traditional scripting events so that you can much more easily run some scripting.

Give the link a unique identifier:


<a id="newpage" href="newpage.html"><img src="popupwindowimage.jpg"></a>

Then place this script at the end of the body, just before the </body> tag.


var link = document.getElementById('newpage');
link.onclick = function () {
    window.open(this.href);
    self.close();
    return false;
};

Yes, you described it perfectly.

Yeah, I generally copy/paste any javascripting I need. I fall way short if I have to come up with something on my own. So I depend on the kindness of strangers.

Instead, use traditional scripting events so that you can much more easily run some scripting.

Give the link a unique identifier:


<a id="newpage" href="newpage.html"><img src="popupwindowimage.jpg"></a>

Then place this script at the end of the body, just before the </body> tag.


var link = document.getElementById('newpage');
link.onclick = function () {
    window.open(this.href);
    self.close();
    return false;
};

Ok, I did that, and it does open a new browser window in a new page, but the popup window stays open.

Does this website allow you to post test urls?

It should do.

http://test3.ssih.com/cgi-bin/yp.pl?letter=B

Under a couple of the listings on the left are “Please see our ad” links that will generate a popup ad. I removed the resize restriction so that you can see what happens and view the code.

The problem is that you don’t actually have it on the popup page as script code.

That script that’s just below the <body> tag, move it to the end of the body, just before the </body> tag and put the rest of the script code in there as well.

Ultimately, you could move the script code out to a separate file and use the src attribute to load the script from there.

That did it!

Thanks so much. I figured I needed some sort of wrapper around that code. I should have just kept trying.