Can I open a new window and change the DOM of the calling window in JavaScript?

Question

First I would like to say that I've been programming JavaScript for about 3 months now and also that I'm not very concerned with solving this problem by the standards or best practices. My main concern is learning to use the DOM. I don't want to use any jQuery because I'm not familiar with it.

I'm trying to make a non-profesional "login" function on my page, using JavaScript and the DOM. To begin with I was using "login" screen that would be displayed "hidden" initially and then be displayed "block" when in use. This worked fine and looked really good when I added a darkened screen behind the "login" screen by adding less opacity (0.1 opacity) to the main part of the page that's beneath the "login screen".

This (the opacity) would return to normal when I closed the "login" screen. So you can see all the stuff is happening within the same page using the same DOM. OK, this is how I wanted it to work: you create a username then you your create a password. Boom, finished!

But here's the problem: after you create a username and password I want it to say "Hello (username here)" where the login link initially was. I could just use the DOM and insert the username into the HTML page, but when I submit the form that is the login function the page gets reloaded and the changes to the DOM become erased!

So now I can tell you about the solution I thought of: make the form (login page) be in a new window, so when the form is submitted (and the DOM is manipulated) the new window is reloaded and then subsequently closes leaving the changes to the main pages DOM intact. Only problem is I can't figure out how to do this. You could probably say that's a major problem hahaha.

So, can I manipulate the parent windows (i.e. the calling window) DOM from the new window?

Answer 1

In response to your answer: you can modify the caller window's DOM by using window.opener.document from the new window;

window.opener is a reference to the caller window (if any, otherwise null), but only if both windows are from the same domain).

NOTE: Is it a small webpage or you are going to do a lot of DOM manipulation on a web site/application via javascript? In the later case you should use a javascript library/framework (I recommend jQuery) in order to do the dirty job more easily.

Answer 2

A popup window can find the window that opened it using the opener variable.

If both the popup window and the original window originate from the same domain, then the popup window can indeed modify the HTML of the original window.

If the popup window and the original window contain content from a different domain, then they can't see the HTML of each other - due to the cross-origin protection that browsers put in place.