How to change pages internally without changing the URL to the user? Without using frames.
Example:
The user entered my site: http://exemplo.com and clicked the menu and went to the "Contact" page.
Make the URL continue: http://exemplo.com , even the current page being http://exemplo.com/contato.html
I recommend loading the page you want within a div
<div id='conteudo'>
And a button to trigger the load event:
<div id='newConteudo'>
With the help of jquery:
$('#newConteudo').on('click', function(){
$('#conteudo').load('subPag.php')
});
In this case the file subPag.php will have the function to mount the new subpage considering that the loaded subject will be part of a main page that will not be reloaded.
The subPag.php file should be treated as a single page snippet. You should not have the tags <head> or <body> , it's an excerpt from your original page.
This has its advantages:
.on . I do not recommend uploading too much script on the subpage as it loads the main page and can easily cause conflicts.
There is yet another possibility with the load via $.post . In this option you use a button / link to activate the function, which in turn can send some data or even form fields to a PHP file. this PHP file, in turn, processes the data and returns via JSON a set of information. This information can be processed in the return function of the $.post command and directed to a div or other place / page element to change the current page. All this without changing the top page URL.
Maybe you want to work with the exchange of links that if the page undergoes a reload .. Got it right?
The most advisable for such cases is to work with Deep Linking
A great library to work with Deep Linking at JS is SwfAddress Asual
You navigate between pages through Ajax without your page being reloaded and still places a browsing history in your url that will be worked as follows:
www.site.com.br
www.site.com.br / # / contact
In /#/contato the call would be to your file contato.html
See an example of this navigation here
The best way to do this is to use history.js
It's robust and simple to deploy. Just download it, add it to your solution and then consume it in a javascript function.
Here's a working example of how to change the URL of your site after the user clicks a button on the Contact menu:
HTML
<html>
<head>
<title>Teste de mudança de URL</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<button type="button" class="btn" id="btnAdd">exemplo 1</button>
</li>
<li>
<button type="button" class="btn" id="btnRem">exemplo 2</button>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
Javascript - in this case, loaded at the end of the HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script><scriptsrc="jquery.history.js"></script>
<script type="text/javascript">
$('#btnAdd').click(function(){
History.pushState({state:1}, "State 1", "?state=1");
});
$('#btnRem').click(function(){
History.replaceState({state:2}, "State 2", "?state=2&user=beto");
});
</script>
In the native javascript of doing so:
<script>
document.getElementById("id_da_div_ou_Body").innerHTML = '<object type="text/html" data="arquivo.php" ></object>';
</script>