Call JavaScript of parent window from child window - javascript

I have a calendar and when I click on a <td>, a pop-up window appears so you can create your evenement for the date you selected. I want to add a feature.
When the user finishes creating the event, I want to send a JavaScript request to the parent page so I can refresh the calendar using AJAX. Basically, I want to call a function from the child, but the function is on the parent page.
On Google, I only found a script that can refresh the parent window – nothing about a “parent callback”. ☹ Is it even possible?
P.S. The answer can be pure JS or jQuery, it doesn’t matter. I’ll keep looking in the meanwhile.

What you're looking for is a reference to the window that opened the popup window. Once you have that, you can call functions in that window, read and write variables in that window, or even manipulate its DOM.
That reference is called opener. It gives you the window object for the window that opened the current window. For example, if you have a function in the original window like this:
function updateMe( data ) {
alert( data );
}
then in the popup window you could call it like this:
opener.updateMe( 'Hello!' );
Naturally, you need to make sure that updateMe() is a global function in the original page. Or if you have some object in the original page and updateMe() is a method of that object, you can still do it, as long as the object is global. e.g. in the host page:
var myObject = {
updateMe: function( data ) {
alert( data );
}
};
then in the popup you could do:
opener.myObject.updateMe( 'Hello!' );
Basically, as long as you could get to the object or function in the original page with window.whatever, then in the popup you can simply change that to opener.whatever.

Related

Javascript : get current window.open() when parent window was refreshed

I want open window but when user refreshed parent location or going to hyperlink, we got last child window and using this code win_pop.location.replace('http://example.com') .
for example :
var win_pop = window.open(url, 'lastWin', 'width=300px,height=200px,top=1200px,left=2000px');
why after refresh parent location child window doesn't working.! before any refresh or going to hyperlink in parent page that working well.
win_pop.location.replace('http://example.com') !!
Do you got any best suggest ?
You load a page
You assign a value to a variable called win_pop
You load a new page
The lifespan of a JavaScript program running in an instance of a webpage is only as long as that webpage instance exists.
When you have a new page, you have a new JS environment, and the old data is lost.
win_pop no longer contains the value you assigned to it.
Much of the time you can store data between pages (e.g. via Local Storage), but that only applies to simple objects, arrays and primitives.
There is no way to preserve the reference to a new window.
The only way to achieve that effect would be to avoid reloading the original page. For example, by performing all navigation to "new pages" by using Ajax and manipulating the history with pushState and friends.
#Quentin is right about what happens to your js variable, but he seems to have forgotten a little thing:
You can make use of the postMessage API and the MessageEvent.source property which will point to your popup Window.
So you can start a loop on your popup which will post a message every n-th seconds to window.opener.
setInterval(function(){
window.opener.postMessage('foo', '*');
}, delay);
Then in all your pages, you will listen for the message event, and set your popup variable to the MessageEvent.source you just retrieved:
onmessage = function(evt){
popup = evt.source;
};
And voilà!
Here is a plnkr

MSIE11, popup window using window.close() erases a variable just set

SUMMARY:
In MSIE 11, in a popup window when I fill a certain field with data it stays filled, or not, depending on if the popup window has window.close() called on it. Can't repeat with other browsers.
DETAILS:
I have a popup web page (a JSP page, if it matters to someone) I use to fill existing fields in a web form. I added a new field and it is filling OK -- sometimes.
Here is the pertinent section of the page, cleaned up for presentation. My actual page doesn't hard-code emails in the Javascript object.
function fillForm() {
var parentWindowOrder = window.opener.salesOrder;
var formData = parentWindowOrder.workingData;
[snip]
var xferEmails = {"emails":["jerome#myserver.com","jerome2#otherserver.com"]};
formData.user_emails = xferEmails.emails;
[snip]
}
window.close(); // HERE IS THE TOGGLE OF MY PROBLEM
In MSIE, if window.close() is disabled (commented out) then everything works OK. Elsewhere in the page the formData.user_emails can be referenced OK. Of course, the popup page still exists and must be manually closed. When using the console the query yields:
>formData.user_emails
["jerome#myserver.com","jerome2#otherserver.com"]
In MSIE, if window.close() is executed in the popup then the popup closes, of course. However, the values stored aren't preserved. When in the popup window itself, either before or after calling window.close(), the field is set and stays set. But after that the values are gone:
>formData.user_emails
{}
In other browsers I get the success condition.
Normally you'd say "You're changing the value elsewhere in your code"; however, I've already swept through my code looking for other references. Here, shown above, is the only place it gets set in my scenario.
In my practice other fills of variables through JSON-like syntax (xferEmails) works OK, even in MSIE. Not this particular one. What with window.close() could influence this?
Thanks for replies,
Jerome.
formData is initialized in the popup opened and within the scope of fillForm function. This is assigned to salesOrder variable of parent window. Did you re-initialize formData with salesOrder in parent window? If you didn't then it should be accessible via salesOrder.

How to check location.href is completed?

I want open a window and then does something after it finishes loading, is there an easy way to do this?
my current code is something like:
cur_window = window.open( 'http://www.google.com' )
// does something when cur_window finishes loading
thanks
The only way to do this is if you write code in the page which is opened in the popup to tell the parent page, the opener object in js, that it has finished loading.
In your example, as your are loading Google, this is not possible.
Assuming you're accessing pages within the Same Origin...
the "easy way" isn't as responsive as jQuery's ready event which can't be applied outside of the original window context:
cur_window.onload = function () {
//new window has loaded
};
If you're trying to open http://www.google.com/ in a new window, you wont have any access to the window object, and therefor have no way of knowing when the new window has loaded.

Access a window by window name

If I open a window using
window.open('myurl.html', 'windowname', 'width=100,height=100');
How do I refer to the new window (from the same page that opened it) using 'windowname'? This question is specifically about this. I'm aware that I could save a reference to the handle by using "var mywin = window.open(...)" but I don't care about that in this situation.
Thanks, - Dave
In firefox (might work in other browsers too, but now it's not my concern) I was able to reference one window accross multiple page loads with
var w = window.open("", "nameofwindow");
This opens new window if it doesn't exist and return reference to existing window if it does exist without changing contents of the window.
With jQuery I was then able to append new content, to make quick collection of interresting links like this
$('body', w.document).append(link_tag);
If you didn't save a reference to the window then there is no way to restore it. However, if that window is still open and if the page loaded there belongs to the same domain as your page, you can run JavaScript code in it:
window.open("javascript:doSomething()", "windowname");
Whether that's sufficient in your scenario depends on what you are trying to achieve.
Petr is correct:
var w = window.open("", "nameofwindow");
works in all browsers, I am using it to retrieve the reference to the window object previously opened by a different page. The only problem is the initial opening of the page, if the popup does not exist, you will get a new window with a blank page.
I tried invoking a Javascript function inside the context of the other document in order to check whether I opened a new window or retrieved the already active page. If the check fails, I just invoke window.open again to actually load my popup content:
var w = window.open("http://mydomain.com/myPopup", "nameofwindow");
Hope that helps.
It is not possible. The windowName is just to be used in target="..." of links/forms or to use the same name again in another window.open call to open a new url in that window.
Try open that window with the name, but URL is '' again, to check if it's a blank window or not. If it's in open, then you will get the window; if not, a new window open, and you need close it.
Add the children in localStorage will help to prevent to open the new blank window.
Please check my code in https://github.com/goldentom66/ParentChildWindow
Sorry I am posting late, but if you still have the other window open, and they are on the same domain, you can run, on the first window:
function getReference(w) {
console.log('Hello from', w);
}
And on the second window:
window.opener.getReference(window);
afaik there's no way like windows['windowname'].
The 'windowname' assigned in window.open() can be addressed as a target in <a target="windowname" [...] >

Object Literal in Firefox extension

I have an extension that needs to pop up a window and then close it.
var my_extension = {
window: null,
popup: function(){
my_extension.window = window.open(...)
},
close: function(){
my_extension.window.close()
}
}
The popup calls the close function. However, after returning from the open, the my_extension.window is null. I check to make sure it is set in popup. Is another instance of my_extension created when the popup returns?
my_extension is defined in the main browser window, not in the popup. To close the popup from the popup itself, just use window.close
edit: ok, so I guess my_extension.close actually looks something like:
function() {
// check input from popup window
if (everythingIsGood) {
my_extension.window.close()
}
}
In that case, I would recommend you do that validation in the popup itself. I know, you don't want to put a lot of code in the popup window. And I agree. But you can pass in whatever information is necessary to do the validation (including passing a validation function -- remember that functions are objects too, because JavaScript is cool like that!) when you open the popup. Look for the discussion of window.arguments on this page: https://developer.mozilla.org/en/DOM/window.openDialog

Categories