I have a button on index page (index.php) that when you click it, it should take you to other page (login.php) without reloading the page simultaneously. Below is javascript with pushState.
document.getElementById('cta_btn').onclick = function() {
window.history.pushState('', '', 'login.php');
};
The problem is that I stay on same page (index.php) only url changes /login.php
pushState is a way of saying "I am using JavaScript to modify the DOM of this page so that it becomes the same as what you would get if you requested this URL". You don't appear to have written the JS to modify the DOM.
It doesn't cause new content to load by itself. It doesn't really navigate anywhere. It just pretends to so you can hook into popstate and change the DOM back to how it was before when the back button is pushed.
If you use pushState then you all need to change the DOM (with createElement and friends for simple cases and with frameworks like React for complex ones).
If you want to navigate to a new page, then assign a value to location.href.
If you don't want to load content from the server in order to do that navigation then make sure the user has previously visited the page and that caching headers were sent then.
I guess State is a Object, You should try this...
window.history.pushState({}, '', 'login.php');
I'm building a little CoffeeScript application with 10 buttons and a container (simple). When the user press on one of the button : the container change.
The buttons look like a navbar and instead of using links (that will reload the entire page), I used javascript (Coffeescript, jquery or whatever) to change the content of the page (with some Ajax query to load data).
The problem is that the back and forward button of the browser can't work with that solution... and I need to find a solution for that. Routing maybe ?
I really like the way Asana.com resolved this issue: actually the address change but the content seems not to be entirely reloaded.
What do you suggest ? Thanks for the help
Hashes. The simplest solution is to define an URL hash every time the user clicks on a button. For example:
location.href = "#" + button.id;
With that, you create a history entry, and the user can press back or forward in the browser.
But how can you check when this happens? There's the hashchange event:
window.onhashchange = function() {
var state = location.hash.substring(1); // chomps the initial #
...
};
Basing your code on the state variable, you can trigger your AJAX calls from there.
By the way, you can change your code altogether, using links instead of buttons with an hash as the href property, which does not reload the page, but creates an history entry and fires the hashchange event.
The hashchange event is supported by every modern browser (that support history.pushState too, a more flexible and powerful way to control your history) and IE8-9.
I have an iframe tag and I want to dynamically change it using jquery animation. So for example the iframe sits on the home page, and if i click the about link, it will load the about.html and when its ready it will slide it down using animation.
I have the basic logic for it but then came about this
problem:
When I refresh the page it loads back the content of the index.html page, and what I want is that when I refresh it, it still keeps the contents of about.html.
About
<iframe id="content" name="content" align="top" src="index.html"
frameborder="0" width="100%" height="1200px" scrolling="no">
</iframe>
this is just the most basic logic, but I need help on how do I achieve the refreshing part/
and what if i dont include them in the same page but I still want to animate the page transitions. so when the users clicks a link to a new page, it will load it, and then animate it.How can I achieve this. Because recently I saw a jquery plugin callen LocalScroll and they achieve this effect, but i couldnt get it to work for new pages
Your reference to the jQuery plugin LocalScroll is on the right track. In fact, if you could implement it properly I think it would solve your problem.
Anchor-based navigation, as used in this plugin, jQuery Mobile, and other places, will update the window.location object and also be reflected in the browser's address bar so that, when an explicit page refresh occurs, the hashed location is preserved.
The answer, then, is to have a script which can parse this local link from the address. Here's a generic JavaScript code block to demonstrate this:
window.onload=function() {
var URLParts=window.location.toString().split('#');
if(URLParts.length>1)
var lastPage=decodeURI(URLParts[1]);
else
return false;
if(lastPage)
iframe_load(lastPage,'content');
}
function clear_last_page(location) {
var URLParts=location.split('#');
if(URLParts.length<=1)
return location;
URLParts.pop();
return URLParts.join('#');
}
function iframe_load(url,targetID) {
document.getElementById(targetID).src=url;
var location=clear_last_page(window.location.toString())+'#'+url;
window.location.href=location;
}
How it Works
When the window onLoad event is triggered, the URL is searched for anchor (hashed) links. If found, we will assume that this is a reference to a page and so then pass it to iframe_load().
This function does two things. First, it points your target inline frame to the page passed via url parameter. Second, it points the parent frame to a fictitious anchor, which will be preserved even after the page is refreshed.
Therefore, when you refresh the parent frame, that anchor text is grabbed, parsed, and used to re-load the last loaded inline page.
The function clear_last_page() is simply a helper function that prevents additional anchor links from being appended to the URL.
Demonstration
Visit this URL:
http://gocontactform.com/stackoverflow/dynamically-change-iframes-content/
Click the link "Page 2" to see the change. Then refresh the page.
Noteworthy
Be advised that this solution technically takes over the normal function of anchoring. So if you attempt to use anchor links normally on the page, you may get undesirable results.
You are forced to rely on iframe_load() for any links bound for that inline frame, instead of what you modeled in your question (traditional linking with a target attribute).
I might also suggest that you define no default src attribute inline. Rather, you could add to the onLoad handler a call to iframe_load('page1.html','content') and that will prevent the unnecessary attempt to load the default page when you are refreshing with anchored links in the address.
There are also other ways to accomplish what you are asking. But I believe that this solution is easy to understand and implement.
Hope that helps!
You can use the following to change the src attribute of the iFrame:
$("#content").attr('src', 'http://mysite.com/newpage.html');
Oops, looks like I misread the question.
If you want to slide it down, you can bind an event handler to the load event (jQuery doc) to do something when the frame loads.
$("#content").hide();
$("#loadLink").click(function() {
$("#content").hide();
$("#content").attr('src', 'http://mysite.com/newpage.html');
});
$("#content").load(function() {
$(this).slideDown();
});
In this example, the iframe is hidden when you click the link, and when it is ready, it slides down.
Demo
Edit: still misread it!
To save the state of which page is last shown in the iframe, you can use HTML5 localStorage.
In the load event of the iframe save the page that it's currently showing.
localStorage['lastPage'] = "about.html"
and then load it back using localStorage['lastPage'] on page load.
Updated demo showing both sliding and keeping the page after refresh.
Not possible. When you refresh a page, your browser is supposed to get the page from the server, dropping all JS data.
History API can help, but only for the newest browers.
Whenever the page loads you need to check something to know what the last src iframe loaded. By default, no browser can know this. One way to do this is to change the hash of your page when hit the click, and whenever page loads, you check if exists this hash and trigger some link with the hash.
I write this: http://jsfiddle.net/estevao_lucas/revsg/4/
Like said Michael, History API can help you.
I have a frame with a page from a different domain. Sometimes, that page likes to use a frame-buster to break out of its frame and hijack my entire page.
I have been experimenting with different ways to handle what happens when this frame wants to break out. What I have determined would be the best way to handle this is to use JavaScript to determine when the parent page url changes (via onunload) I want to direct the user back to my homepage or close the page altogether. I am a php dev and don't really ever use JavaScript.
I have tried using but that doesn't seem to work. Any ideas?
you can use something like this:
<script>
window.onunload=function() {
return confirm('Are you sure you want to leave the current page?');
}
</script>
So what I want is to do this:
if (top != self) {
top.location = self.location;
}
on self.location; change event. (it is possible to use jQuery if really needed but I would love not to) Is it possible and how to do such thing?
The main idea is to keep all popup windows on top. And here we try to modify window code so that it would get onto top when user clicked on main page to open new one. So I figured we shall subscribe and listen to self.location change event. I wonder how to do it?
Are you trying to do 'frame busting'? Or are you wanting to know when top.location changes? If the latter, I presume this is to detect changes to the hash tag value of the URL, otherwise a location change loads a new page, thus your JS could never run.
If you want to check hash-tag change events (that is, content that is after the # in a URL), read up on this similar question on SO: On-Window-Location-Hash-Change.
If this is about frame busting, there are a lot of good related questions on SO such as Frame Buster Buster.
As well as a interesting blog post on Coding Horror.
Did you mean?
if (top.location != self.location) { top.location=self.location; }