How to prevent iframe from being redirected to the beginning

Asked

Viewed 747 times

2

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

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

Detail, it seems a browser dependent behavior, because the redirection happened only in Chrome, in Mozilla and ie follow normal, or as I wish.

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

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

Which calls 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 press F5 it goes back to home.html, which is the default iframe file.

javascript html

  • c vc had the possibility to use a php write the section with the current page file from there when update vc printa that section

2 answers

2


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

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

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

    Glad it worked out! This new HTML5 API is really good. :)

1

Based on this structure I suggest using sessionStorage to store Urls.

You can have a JS that will be on all pages that are within 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 page in the frame you have the URL.

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

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

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.