Browser back button doesn't work when content is loaded into an iframe

Browser back button doesn't work when content is loaded into an iframe

I have a javascript funtion using which I display some content when the
user clicks on a link.
function showContent(filename){
var oldcontent = $('#content').html();
var srcUrl = getSourceUrl(filename);
$('#content').html(oldcontent + '<iframe
style="width:100%;height=100%;display:block;" src="'+srcUrl+'" />');
}
Since the content is loaded into an IFrame, the URL doesn't get changed
and I can not go back to the previous page where the link was using
browser's back button. I am a newbie and I tried to do something(silly
experiment) like this. i.e. appending a '#page2' to the url but then when
user clicks on the back button, nothing happens.
var oldcontent = $('#content').html();
var srcUrl = getSourceUrl(filename);
location.href = location.href + '#page2';
$('#content').html(oldcontent + '<iframe
style="width:100%;height=100%;display:block;" src="'+srcUrl+'" />');
Can anyone please tell me what's wrong with this and how to enable the
back button functionality?
Thanks