Sugiro que use Ajax e não iframe, porque a altura do iframe não irá se ajustar ao seu conteúdo; exceto se você fosse usá-lo com altura definida e scroll automático, aí sim, o iframe seria uma opção mais simples, pois bastaria alterar o src
e pronto. Mas não creio que seja o caso.
Ajax com JavaScript puro:
Este método irá chamar a página especificada em cada link e irá inserir na segunda div
o retorno da página requisitada.
É preciso criar um evento que irá capturar o clique nos links. Para isso, inclua uma class
em cada link do menu, assim:
<a class="menu" href="loja1.php">Loja 1</a>
^^^^^^^^^^^^
<a class="menu" href="loja2.php">Loja 2</a>
^^^^^^^^^^^^
Colocando class
em cada link, você irá capturá-la desta forma:
document.querySelectorAll("a.menu");
Mas pode fazer também de uma forma mais simples se os links estiverem dentro de um contâiner, sendo desnecessário o uso de class
:
<nav>
<a href="loja1.php">Loja 1</a>
<a href="loja2.php">Loja 2</a>
</nav>
Então você capturaria os links com:
document.querySelectorAll("nav a");
Veja que cada href
dos links possui um destino. Esse href
será usado no Ajax para puxar os dados da respectiva página.
Código que irá criar os eventos e o Ajax (explicações no código):
document.addEventListener("DOMContentLoaded", function(){ // espera o DOM ser carregado
var menu = document.querySelectorAll("a.menu"); // seleciona todos os links com a class .menu
// guarda a segunda div numa variável
// troque "div2" pelo id da sua div que irá receber os dados
var div = document.getElementById("div2");
// faz um loop em todos os itens selecionados
for(var x=0; x<menu.length; x++){
// cria o evento onclick para cada link
menu[x].onclick = function(e){
e.preventDefault(); // cancela a ação do link
var page = this.href; // pega o atributo href do link clicado
// exibe uma mensagem na div enquanto o Ajax é processado
div.innerHTML = "Carregando...";
if(ajax) ajax.abort(); // aborta se o Ajax estiver sendo processado
var ajax = new XMLHttpRequest(); // cria o objeto XHR do Ajax
ajax.open("GET", page, true); // define as opções
ajax.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
// se o Ajax foi bem sucedido, envia o retorno para a div
div.innerHTML = this.responseText;
}
}
ajax.send(); // faz a requisição
}
}
});
Se estivesse usando jQuery o código seria mais simples. Mas se for usar
jQuery apenas para fazer isso, eu sugiro que use JavaScript puro
mesmo.