I have an application containing a JavaScript view model controlling it.
The application launches a new window with (window.open()) and assigns click event listeners to buttons in the new window. New window contains a form, which when submitted, causes an unload event on its window, and thus breaking access to it from the parent window.
How can the parent's reference to this new window persist or reinstate, when the window 'unloads' and a form submits?
You can not keep that reference. However if you are trying to access some kind of values you may look into cookies or local storage.
You can also try to reinstate the reference by attaching an event listener to the "unload" event. When the event occurs close the current "parent" window, and make the "submit" script point to the parent window. Once opened you can re-open the child window from there.
Update
Cross-window javascript is a messy subject. I advise taking the first approach if it's applicable.
As far as I know, not all browsers allow to regain access to a window by name even if you provide it. But I'd still try to use distinct window names with window.open.
When trying to regain access to it - just do a window.open without url - maybe javascript:void(0) as address (so the window doesn't navigate away), it should be the same window as long as you use the same id.
it's pretty hacky though
Related
I am using window.open to open a new window which will send some message to the parent window using window.opener.postMessage.
This child window URL is arbitrary. I mean there is a textbox where the users can give the URL and it will be opened using window.open.
Although the user is suspected to use the URLs that are supported, it is also possible that some random URL will be used. In this case, I don't want to child window to make any changes to the parent window, especially to the parent location.
How can I avoid this issue? I've tried to use noreferrer,noopener; however, that breaks entire cross-window communication altogether, which is not desired.
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?
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.
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.
What I'm looking to do is create a new window using window.open and then when the new window opens, I want to check if that window is active throughout?
For example: I have
myNewWindow = window.open(document.getElementById("inputbox").value).focus();
Once this window opens, I want to increment the value of variable increase if myNewWindow loses focus.
I'm doing :
if(myNewWindow.onblur()){
increment value...
}
setTimeout('myNewWindow.close()',3000); // closing window after 3 seconds. So, I'm really trying to check if the window was in focus for those 3 seconds.
However, the onblur does not seem to work no matter what I try. but, window does close.
Any ideas anyone? I just need to find out if the new opened window was minimized or some out of focus.
Its fairly easy to detect if the window in which you are running your JS is losing focus or not. And the same does not seem to work in my case. For example: JavaScript / jQuery: Test if window has focus
From page1, no you cannot directly set or subscribe to events on page2. However, you can use something like window.postMessage to pass messages between them.
I have a parent opening a new window, and trying to detect when the child window has loaded. In Chrome, I've tried
open('http://www.google.com').onload = function() { alert(location.href); };
but that doesn't seem to work.
Why doesn't the above method work? Are there alternatives?
If you want to be absolutely certain that a page has loaded, you can use messaging.
If you are able to use HTML5, there is a new feature called web-messaging.
This works very well on cross domain sources.
If HTML5 is not an option, use JS instead. I used a simple jQuery plugin called: windowmsg. It has worked excellently for me. I'm really not sure about this working on a cross site environment, but I think it should.
Beware of the security issues that these kind of solutions offer.
The method as it is should work(and works for me), but not when opening a window with a document from a different domain.
For security-reasons the new window will not dispatch the load-event to a document from another domain.
Technically speaking the child window and parent window are two different instances of the browser. We call them as child window and parent window. They do not have access to each other.So its not possible to perform any action in one window on the click of HTML elements in second window.
So, I suggest that you should not open a new window if you need access. You can use fancybox or lightbox that is effectively a part of the same window and that, you have control.
I'm not the most javascript savy. I've seen posts for children windows getting parent values but not vice versa.
Basically, I want to invoke a window object with window.open. After some user input is entered in the new window, I want to stuff that input into the original window that invoked the window.open.
The only ways I can think to do this are messy. I don't need any code examples. But if it is possible and you can example it to me I would be grateful.
When you open a new window, window.opener contains a reference to the parent window (i.e. the window that opened this window).