Is there a better way to cause a smooth redirect?

Question

This checks to see if a page is loaded in iFrame, if not it redirects to another url. It is very ugly, it shows the page just before it redirects. I am wishing for another more smooth redirect.

<script>
function check_frame() {
     if( top === self ) { // not in a frame
          location.href = "/link/to/some/url"; // either the frameset or an error.
     }
}
</script>
<body onLoad="check_frame()">
... normal code for your page here ...
</body>

There are tricks, such as having page content hidden with inline css and then showing it when the page is loaded the way you want it to be, but the best way to do a redirect is on the server, so the correct page is the one the client gets first time. — Reinstate Monica Cellio, Nov 25 '19 at 17:41
I think `body onLoad` is same of `window::load`. `document::ready` should fire sooner. — GrafiCode, Nov 25 '19 at 17:43
@GrafiCode `body.onload` is the same as `document.ready`. The latter is just a common jQuery equivalent. — Reinstate Monica Cellio, Nov 25 '19 at 17:43
@Archer according to this: https://html.com/attributes/body-onload/ `body event handlers act on the browser window, and the script will only be executed once the page is completely finished loading.` — GrafiCode, Nov 25 '19 at 17:44
@Archer I must insist: https://stackoverflow.com/questions/4395780/difference-between-onload-and-ready — GrafiCode, Nov 25 '19 at 17:46
@GrafiCode That's very old and outdated. `body.onload` is the same as `document.ready`. `window.onload` fires after page content is loaded (images, scripts etc.) That's the difference between the body and window load events. — Reinstate Monica Cellio, Nov 25 '19 at 17:48
@Archer ... The CSS you mention would work perfectly. I have to create these pages on the fly... Could you inject a sample into my code (I don't know where it would go inline). — AmRy, Nov 25 '19 at 17:56
@AmRy I've added some example code below. That should get you going. — Reinstate Monica Cellio, Nov 25 '19 at 18:17
@Archer I need to clarify that the page should NEVER be accessed directly, ONLY if it is loaded in an iFrame. If by accident/with mal-intent it is accessed by it's URL, the user will be redirected to a "you don't have access page". The entire code is going just before — AmRy, Nov 25 '19 at 18:42
In that case, that has to be done on the server - there's no other way to do it. — Reinstate Monica Cellio, Nov 25 '19 at 18:56

score 0 · Answer 1 · answered Nov 25 '19 at 18:50

You can use css to style the body with opacity 0 and set it to 1 by assigning it a css class after you detect that you are inside a frame. A side benefit of this method is that you can use a transition to fade in your content, if you're into that.

You might consider using location.href.replace so the user doesn't accidentally end up clicking their back button and winding up in the same redirect loop.

Also, you might consider checking to make sure you're inside the same frame you expect to be inside. After all, the current test just makes sure you're in any frame -- even if it's on someone else's website such as stack overflow.

if (window.top === window.self) {
  location.href.replace("/link/to/some/url");
} else {
  document.body.classList.add('framed');
}

body {
  opacity: 0;
  transition: opacity 2s ease-in;
}
body.framed {
  opacity: 1;
}

<div>Your framed content</div>

I was able to use your code somewhat but I can't get it to work in the frame. How can I share my code with you? — AmRy, Nov 27 '19 at 02:49

Is there a better way to cause a smooth redirect?

1 Answers1