We Keep Coding

How can I change the source of an iframe when the user clicks on the browser back button?

Good day,
I have taken over a Drupal site that uses iframes for the main content area. I have a minor issue that I'd like to correct.
When a user clicks a link to a page that has a lot of content, then uses the browser's back button to navigate to the previous page, the old content appears, but the iframe's src does not change. I'm using some javascript to set the height of the page dynamically, so when the previous page has less content, there's a huge amount of empty space between the content and the footer.
Here's a diagram that hopefully illustrates what I'm working with:
So upon returning to the previous page, via the browser back button, the footer is pushed way down below because the source has not changed, and therefore the page isn't rendered again.
I've not really used iframes because they aren't great to work with. I'm wondering, is there a way to force the source of the iframe to change when using the browser back button?

URL navigation in a single page website

I have a single pager website where each of the buttons takes you to a separate section following an animation. I've set up an example here: https://dev.dport.me.
Currently when you navigate to a page, the URL stays the same. For example, navigating to the About section does not append #about to the URL. I would like the site to work more like a normal site in respect to navigation.
What is the best way to go about making it such that:
Navigating to a "page" changes the URL. Following the example, either to #about, or even better, /about.
Navigating directly to a subpage works. Meaning that if I navigate to https://dev.dport.me/about, it takes me straight to the subpage.
The back button works. Currently if you navigate into a subpage, you must use the back button on the page. The browser's back button just leaves the whole site.
Is there some pre-existing javascript library that does what I'm looking for? Or am I going to have to gun it alone, perhaps with something like this.

HTML5/Javascript: Content changing without adress changing

I have a question which I haven't been able to find the answer for. I hope you can help me.
I am about to build a simple website, containing text and hyperlinks. I want the site to have the same adress no matter which hyperlink is clicked. For example, if my website is www.website.com - when one clicks a hyperlink, the content of the whole page should change, but the adress should still be www.website.com, instead of www.website.com/hyperlink.html for example. In other words, I want to disable people to use the "back" button to return to an earlier page, and prevent them from navigating the page by writing in the adress bar. They should experience a single page, but still be able to navigate through a lot of changing content through links - which means that if they click the "back"-button, they will be navigated away from the website, and if they refresh the page, it will go back to 'index'. Can you point me in the right direction to which methods might be useful here? Earlier, I would have done it in Flash, and embedded the flash-construction into the website, but as far as I have heard, Flash is not the best solution anymore?
Thanks in advance.

First of all, that is not the best idea for SEO.
But that puts aside, you should use javascript to make AJAX call and alter the partial part of your page with the response.
So basically, what you will do is from your home page, capture all link clicked event, and process the request through an AJAX call, and display the result of that call on the same page.
That allow you to refresh a list of item, or a menu, or the entire page if you want.
Since it will be AJAX call, the user won't see any difference in the URL.

Reload/Refresh IFrame without have a white flash?

I have a iFrame which loads many different pages, the initial load is always fine as i hide the IFrame until content is loaded then only do i display the IFrame.
My problem is now i have some pages which need to postback to grab information out the database dependent on what a user has on that page.
When this happens i get a white page while content is loaded. I cant hide the page as this would look worse then having a white loading page, i just need it to sit still with no flash while its drop down box populates.
I'm up for any solution using JS JQ or C# and my project is in ASP.
How i call my page refresh:
window.location.reload(true);
I call the refresh from inside the iFrame (Name: IFrameDam)
I am able to hid my IFrame from with in its self if this sparks any idea's:
$('#IFrameDam', window.parent.document).hide();

You can use Ajax request instead iframe and update the contents inside iframe parent div with id #IFrameDam and set the timer to resend ajax request and update without white screen. This behavior is same for almost any browser whereas iframe loads a whole new page inside current page leaving a blank space when not loaded.
here's how you can achieve this using ajax and jquery.
Just put iframe src path after "request_page" and refresh time after "time" variables.
Follow this link: http://jsbin.com/EYIKAnAb/1/edit?js

AJAX post from within iFrame to refresh parent page

I have a JS function that is called in an iFrame that performs a post to my server and THEN is suppose to refresh the parent page of the iFrame. When I click a button on a third party site, a hidden div is rendered with my iframe. Once I make a submit post, I want to refresh the page (3rd party) page.
So the current setup for that website (which is third party and I have no control over their code), is this:
Body
div
div
div
table
tr
my iframe
....
So the code that is attached to my jQuery ajax POST call is such:
.....
xhtml.append("}).done(function() { alert('im here'); window.location.reload(false);});");
xhtml.append("}");
.....
I'd prefer not showing all the code - but I can confirm that the done callback from the post IS called correctly AND the page does appear to "refresh" - but it should be treating it almost like I first entered the page, with my iframe closed.
How do I get almost a fresh reload of the page/css/etc? I figured this would work, but it appears it doesn't.
--Edit--
I realized that adding reload(true) will reload the server on initial request. However, the other content that renders (to view the hidden div) doesn't appear to reload correctly. It leaves the hidden divs up.
--Edit 2--
It looks like that window.location.reload(false); isn't a true "replica" of a browser refresh call. Which is ideally what I'm looking for.

Instead of saying
window.location.reload
try using
window.parent.location.reload
Above options will only work in case of the page and contents of IFrame both are hosted on same domain.