2

Tenho uma aplicação que usa o iframe para redirecionar as páginas sem modificar a url. (Entendo as consequências de fazer isto.)

O problema e que ao atualizar a página com F5 é redirecionado para a página de origem, no caso a página de login, como evitar que ela seja redirecionado para esta página?

Detalhe, parece um comportamento dependente de navegador, pois o redirecionamento aconteceu apenas no Chrome, no mozilla e ie seguem normais, ou como eu desejo.

Segue exemplo para testes:

index.html

<!DOCTYPE html>
<html>
   <head>
      <title>Router</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
      <iframe src="pages/home.html"></iframe>
   </body>
</html>

Chama pages/home.html

<!DOCTYPE html>
<html>
   <head>
      <title>Home</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
      <ul>
         <li><a href="about.html">About</a></li>
      </ul>
   </body>
</html>

Que chama pages/about.html

<!DOCTYPE html>
<html>
   <head>
      <title>About</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
      <ul>
         <li><a href="home.html">Home</a></li>
      </ul>
   </body>
</html>

No Chrome, se eu ir ate about.html e apertar F5 ele volta para home.html, que é o arquivo padrão do iframe.

1
  • c vc tive a possibilidade de usar um php grava a seção com o arquivo da pagina atual dai quando atualizar vc printa essa seção 30/09/2016 às 16:56

2 Respostas 2

2

Realizei algumas modificações mas a ideia foi essa @Laerte.

deixei a url default e toda vez que a pessoa muda de página é salvo nas sessões, caso a página não seja encontrada ele redireciona para a página de inicio.

var router = $("#router");

url = "index.html";

if (!!sessionStorage.getItem("url")) {
  url = sessionStorage.getItem("url");
}

router.on('load', function(e) {
  var url = $(this).contents()[0].location.href;
  var iframe = router[0];
  var ifTitle = iframe.contentDocument.title;
  if (ifTitle.indexOf("404") >= 0) {
    sessionStorage.removeItem("url");
  } else {
    document.title = ifTitle + " - Portal";
    sessionStorage.setItem("url", url);
  }
});


router.attr('src', url);
html,
body {
  height: 100% !important;
}

#router {
  width: 100%;
  height: 100%;
  border: none;
}

body {
  margin: auto;
  width: 100%;
  height: 100% !important;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="router"></iframe>

1
  • 1
    Que bom que deu certo! Essa API nova do HTML5 é muito boa. :)
    – Laerte
    10/03/2017 às 19:52
1

Baseado nessa estrutura eu sugiro utilizar sessionStorage para armazenar as URLs.

Você pode ter um JS que estará em todas as páginas que estão dentro do frame e que você quer guardar:

var els = document.getElementsByTagName("a");

for(i = 0; i < els.length; i++){

    els[i].addEventListener("click", function (el) {

        var index = el.target.href.lastIndexOf("pages");

        var url = index != -1 ? el.target.href.substr(index) : el.target.href;

        sessionStorage.setItem("url", url);
    });
}

Assim toda vez que o usuário mudar de página no frame você tem a URL.

No index.html basta fazer a verificação e setar a página atual do usuário:

if(sessionStorage.getItem("url") != null) {
    document.getElementById("principal").src = sessionStorage.getItem("url");
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .