How to prevent the iframe from being redirected to the beginning

Navigation
2

I have an application that uses the iframe to redirect the pages without modifying the url. (I understand the consequences of doing this.)

The problem is that updating the page with F5 is redirected to the source page, in the case of the login page, how do you prevent it from being redirected to this page?

Detail looks like a browser-dependent behavior, because the redirect happened only in Chrome, in mozilla and ie normal, or as I wish.

Here is an example for testing:

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>

Flame 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>

Calling 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>

In Chrome, if I go to about.html and hit F5 it goes back to home.html, which is the default iframe file.

    
asked by anonymous 30.09.2016 / 18:51

2 answers

2

I made some changes but the idea was this @Laerte.

I left the url default and every time the person changes pages is saved in the sessions, if the page is not found it redirects to the homepage. 

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><iframeid="router"></iframe>
    
01.03.2017 / 12:47
1

Based on this structure I suggest using sessionStorage to store the URLs.

You can have a JS that will be on all the pages that are inside the frame and that you want to save: 

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);
    });
}

So every time the user changes the page in the frame you have the URL.

In index.html just check and set the user's current page: 

if(sessionStorage.getItem("url") != null) {
    document.getElementById("principal").src = sessionStorage.getItem("url");
}
    
30.09.2016 / 20:24
RDLC report in an internal project folder? What is the difference between SmtpClient.SendAsync and SmtpClient.Send () using Thread?