Javascript: Refresh parent page without entirely reloading - javascript

After a user has logged in via a fancybox (javascript) popup I wish to reload the parent page so they can access the logged in features.
Currently I am doing this with:
Continue
This works great, but the only issue is that it completely reloads the entire page: redownloads all the css & javascipt, etc.
All I want to do is reload the page normally, not a full refresh. How can I achieve this?
(I do not know the exact URL because the login can be done from any page via the fancybox, so I can't hardcode the URL.)

Another way of reloading the page i have seen in the facebook graph api is the following:
window.location = window.location
or in your case:
window.top.location = window.top.location
This solution reloads the page without trying to resend a POST request. Might be useful. for more information look at the following SO question.

Use:
location.replace(location.href.split('#')[0]);
The split on hash is required, otherwise an url with a hash will not be refreshed.
If you want to keep the previous load in browser history, use assign instead of replace.
href is not currently supported by Opera, according to MDN.

Related

HTML5 iframes usage to skip loading intermediate html

I have a HTML page which I want to display on browser. This is a login page(https://localhost:9000/login). Before loading this over browser page I want to hit another url which gives me another html page . This url is basically to kill the existing sessions.(https:xyz)But this also redirects me to another page which I don't want to display . I want to remain on login page.
I think this is possible using iframes. I am newbie to iframes. Any pointers on how to achieve this?
That's a local link only viewable on your computer.
So you want to load another page, before the login page? If you want to kill existing sessions you can use sessionStorage for that.
There are a few things that don't make sense with this, but it's your project. like you want to redirect to another page, but don't want that page to display. That makes no sense to me.
You want to remain on login page, but when you login, you want to get another html page in the login page?
iframes are probably the worst thing in the world imo... you got so much going on here, but can simplify this so much. A login page to an inner page and then you go from there.
There are a number of ways to achieve the end means here, sessionStorage being one. Just search around here for answers, you can find a ton of them.
Good luck!
iframes have been removed from HTML specifications, you cannot use them in HTML5.
Use attribute target="_blank" in the <a> of this url. It will open in a new tab

How can I disable the saving bookmark function for specific page just via the html code?

the requeirment is that I want to avoid the specific web page to save to bookmark,
and is there someway to acheive this funcion just use some code, maybe add or js code . thanks
The answer is no, the user can always bookmark a page as this is browser function, but you can use sessions. Then make sure that any request for a page
must have an active session id or it returns an error or redirects to the home page. The user can bookmark the page but the bookmarks will then only work for a short time (until the session expires). This also has the added benefit of
making the site impossible to index by search engines.
The closest you're going to get is if you open another window using JavaScript as you can control whether the menubar and toolbar are displayed.
window.open(
"https://www.google.com/",
"Google",
"resizable,scrollbars,status");
However, this is likely going to be blocked by their popup blocker.

Url change with animation

I found on a google website, that they realized a url-change without reloading of the whole page.
Example:
you are on www.googleio.com/first
click a button
url changes to www.googleio.com/first/second
the content "first" disappears with an transition to the left, and the content of "second" appears with another transition. the page isnt reloading.
how is this done?
someone told me, that you use the Javascript function 'Header("Location: ../second")', which is aborted after the browser types the url into the adressbar, but before he reloads. the you just let the new content appear with some other javascript. is this true? i couldnt find anything about this.
or is there another solution?
thx a lot!
This does not seem like an actual page reload, however an use of AJAX with a pushState router.
What is actually happening is that your browser is making an AJAX call to fetch the next page, and then displaying it when it has received it.
It is using the HTML5 pushState feature to update the URL.
pushState (which you can read more about here) is an HTML5 feature which is similar to the hashes (#) that sites used to use.

How do you break out of frames without breaking the browser's back button?

A site that links to mine keeps my site in a frame, so I added the following JavaScript to my page:
if (window.top.location != window.location) {
window.top.location = window.location
}
Now if I get to my site via the offending site, my site successfully breaks out of the frame. But the back button breaks! The back button sends the user to the framed version of my site, which immediately breaks out again, returning him to where he was trying to leave! Is there a simple way to fix this?
window.top.location.replace(window.location);
The replace method is specifically for this purpose. It replaces the current item in the history state with the new destination so that the back button won't go through the destination you don't want.
jfriend00's answer is indeed correct. Using the window.location.replace method will work without affecting the back button.
However, I'd just like to note that whenever you want to stop a page from being framed, you should do more than just that! There are a couple methods of preventing a simple script like that from breaking out of the frame, which work in many modern browsers. Perhaps you can disable the page, display a message with a link to the full page, something like that. You could also use the X-Frame-Options response header that tells the browser not to display the page in a frame. If you don't take some of these measures, your site could be clickjacked.
Another solution is to open your site in a new window leaving a friendly message in the iframed site:
if (parent.frames.length)
{ window.open("mySite.htm", "MySite");
location.href= "framedMessage.htm";
}
Where framedMessage.htm contains some friendly/warning message.

The Facebook footer bar is an iframe, so why it doesn't it reload with the rest of the page?

I want to know how Facebook is doing their iframe footer bar. I mean, i know they have an iframe on footer, but i want to know how they are reloading pages without reloading the iframe also, 'cause the iframe always stick there even though the page does reload again. Any ideas/knowledge?
EDITED:
Try clicking on a link which is different section and it changes the url and so far i know, if you try to change the URL, then the page will reload again. Also, try using Facebook on Chrome: you will see it reloads on every new page. It's not AJAX, because the URL wouldn't change if it was AJAX (do little research on URL changing, you will know).
Well, powtac pretty much gave you the answer: Facebook doesn't reload the whole page when you click a link, it requests the new content via XMLHttpRequest and refreshes only those portions of the page that change.
It's pretty slick about this: a naive implementation might not use real links at all, thus preventing you from opening, say, a different Facebook tab in a separate browser tab.
This technique - intercepting link navigation - also allows Facebook to use custom prompts when you try to navigate away without saving, and re-write paths as fragments, allowing it to track the current location in the URL without reloading the page.
FWIW, this question has already been asked and answered - see: How are the facebook chat windows implemented?

Categories