Difference between window.location.href and top.location.href - javascript

Can Anyone tell me the difference between window.location.href and top.location.href ?
And also where to use which one.
And which one will be better when redirecting after an ajax call in mvc?

window.location.href returns the location of the current page.
top.location.href (which is an alias of window.top.location.href) returns the location of the topmost window in the window hierarchy. If a window has no parent, top is a reference to itself (in other words, window === window.top).
top is useful both when you're dealing with frames and when dealing with windows which have been opened by other pages. For example, if you have a page called test.html with the following script:
var newWin=window.open('about:blank','test','width=100,height=100');
newWin.document.write('<script>alert(top.location.href);</script>');
The resulting alert will have the full path to test.html – not about:blank, which is what window.location.href would return.
To answer your question about redirecting, go with window.location.assign(url);

top object makes more sense inside frames. Inside a frame, window refers to current frame's window while top refers to the outermost window that contains the frame(s). So:
window.location.href = 'somepage.html'; means loading somepage.html inside the frame.
top.location.href = 'somepage.html'; means loading somepage.html in the main browser window.
Two other interesting objects are self and parent.

The first one adds an item to your history in that you can (or should be able to) click "Back" and go back to the current page.
The second replaces the current history item so you can't go back to it.
See window.location:
assign(url): Load the document at the provided URL.
replace(url): Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.
window.location.href = url;
is favoured over:
window.location = url;

top refers to the window object which contains all the current frames ( father of the rest of the windows ). window is the current window.
http://www.howtocreate.co.uk/tutorials/javascript/browserinspecific
so top.location.href can contain the "master" page link containing all the frames, while window.location.href just contains the "current" page link.

Related

Assigning window.parent.location.href = window.location.href

My page contains two iframes. Both iframes represents a single page applications that contain routes for different views.
E.g.
parent window (contains the iframes): http://mypage.com
iframe1: http://mypage.com/#case/1
iframe2: http://mypage.com/#register/2
Each iframe contains a button that, when clicked, should display the entire iframe content in the iframe parent's window.
Now I wanted to assign the href attribute of an iframe's location object to the iframe's parent location object:
window.parent.location.href = window.location.href;
This code is executed inside the iframe obviously. But when executing it , the iframe reloads http://mypage.com. The parent window doesn't get reloaded at all.
Somehow the parent frame didn't reload by assigning a new URL to window.parent.location.
Additionally, I had to call reload() to get the page doing an actual reload.
window.parent.location.reload();

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

Reload parent page after closing popup window

I am trying to have the user sign in through a popup window. When they click the link to the popup window which is a php variable they can sign in. When the window closes I want it to reload the page they were originally on (the parent page).
Here is the code on the signin.php page...
<body onunload="opener.location=('')">
But all this does is make the sign in page become the page the user was on. I think I need to put something in the parentheses, but I can't figure out what goes there.
To reload a page, you can set the location property as the current value, like this:
window.location = window.location;
So for your case, you would use, literally:
onunload="window.opener.location = window.opener.location;"
You can also use the reload method of the location object:
onunload="window.opener.location.reload();"
This is the preferred method.
Also, please refer to the accepted answer for your previous question: Refreshing Parent window after closing popup
Documentation
window.location on MDN - https://developer.mozilla.org/en/DOM/window.location
window.opener on MDN - https://developer.mozilla.org/Talk:en/DOM/window.opener
echo '<script>window.opener.location.reload()</script>';
echo '<script>self.close()</script>';
It works well in all browsers.

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" [...] >

Find window previously opened by window.open

We've got the following situation, running from a single domain:
Page A uses window.open() to open a named window (a popup player). window.open() gives page A a reference to the window.
User now reloads page A. The reference to the named window is lost. Using window.open() to "find" the window has the unfortunate side effect of reloading it (undesirable). Is there any other way to get a reference to this window?
Try this:
var playerUrl = 'http://my.player...';
var popupPlayer= window.open('', 'popupPlayer', 'width=150,height=100') ;
if(popupPlayer.location.href == 'about:blank' ){
popupPlayer.location = playerUrl ;
}
popupPlayer.focus();
It will open a blank window with a unique name. Since the url is blank, the content of the window will not be reloaded.
AFAIK, no there isn't..
A kind-of-dirty-but-i-guess-it-will-work hack would be to periodically reset the reference on the parent window from within the popup using window.opener, with something like this code:
setInterval(function() {
if(window.opener) {
window.opener.document.myPopupWindow = window
}
}, 100)
In the parent window, you'll be able to access document.myPopupWindow, even after a reload (well, 100ms after the reload). This should work cross browser.
Actually what you did is destroy the parent (page A) of the created window (Popup), so it has no more reference to the original parent therefore you can't get a direct reference.
The only solution I can think of is using a browser that offers you added javascript capability to cycle through active windows (tabs) and find one that has a special property (ie: your reloaded page A) that gets recognized by the popup.
Unfortunately I guess only firefox has some added capability or extension that gives you this flexibility. (it is also a security risk though)
This should work. Add this code in the popup:
function updateOpener() {
if (window.opener)
window.opener.document.myPopupWindow = window;
else
setTimeout(updateOpener, 100);
}
updateOpener();
And this in onload of the parent window. To make sure myPopupWindow have been set wait 100 ms before accessing it.
setTimeout(function() {
if (document.myPopupWindow)
document.myPopupWindow.focus();
}, 100);
If all the windows share a common Url origin you can register a ServiceWorker and then access all windows from the ServiceWorker: https://developer.mozilla.org/en-US/docs/Web/API/Clients
AFAIK You won't be able to pass a reference to other windows from WorkerService to your window but you can establish communications with the ServiceWorker via
https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage
https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage
It Might help someone, If you opened an child tab and after refreshing the parent tab, you still want to focus on that child tab instead of opening new child tab: -
const chatPopup = window.open('', 'chatPopup');
if (chatPopup.location.href === 'about:blank' || !chatPopup.location.href.includes('/chat')) {
this.openNewWindow = window.open('/chat', 'chatPopup');}

Categories