Jump to content
Please Use CODE Tags

HTML redirect not working

747Dan
By 747Dan
in Programming
 Share
Go to solution Solved by C2dan88,

Been doing some testing and come up with a solution

 

Add your redirect code as an embed html element. When adding the element look in the properties & events panel and take note of the element id

And replace this line window.top.location.href = redirect; 
with this 

// message the parent window, with the redirect url
window.parent.postMessage(redirect, "https://puzzlesofthemonth.wixsite.com"); // the origin has to match your sites domain

 

Now in the velo dev mode code panel select your page and add this code 

import wixLocation from 'wix-location';


$w.onReady(function () {
    // capture the message sent when the countdown timer reached zero
    $w("#myEmbededHTMLElementID").onMessage( (event) => {
        // the message contains the url to redirect to
        let redirectLocation = event.data;
        // redirect the user to the new location
        wixLocation.to(redirectLocation);
    });
});

Change myEmbededHTMLElementID to the id of your embed html element

 

Posted

Hey, I'm stuck on getting this code to work properly. I want it to redirect, outside of the widget on the webpage, after the 5 second count down stops. However it just stops at the countdown. Please help; thanks in advance!

I've been using this as an emulator: Redirect with countdown timer - JSFiddle - Code Playground

If I click on the emulator before the timer hits 0, it redirects, but if not an error appears.

 

The HTML code is below. 

<!DOCTYPE html>
<html>
<head>
  <base target="_parent">
<link href='https://fonts.googleapis.com/css?family=Bai Jamjuree' rel='stylesheet'>
<style>
body {
    font-family: 'Bai Jamjuree';font-size: 30px; text-indent: 150px;
}
</style>
</head>
<body>

<!-- Redirection Counter -->

<br><br><br>
<script type="text/javascript">
	let url = location.href;
  var count = 6; // Timer
  var redirect = "https://puzzlesofthemonth.wixsite.com/quiz/ks3-quizzes"; // Target URL

  function countDown() {
    var timer = document.getElementById("timer"); // Timer ID
    if (count > 1) {
      count--;
      timer.innerHTML = "This page will redirect to the current page in " + count + " seconds."; // Timer Message
      setTimeout("countDown()", 1000);
    } else {
      window.top.location.href = redirect;
    }
  }
</script>

<div id="master-wrap">
  <div id="logo-box">

    <div class="animated fast fadeInUp">
      <div class="icon"><div>
      <br><br><h1>404</h1>
    </div>

    <div class="notice animated fadeInUp">
      <p class="lead">The page you are trying to access has moved location.</p>
    </div>

    <div class="footer animated slow fadeInUp">
      <p id="timer">
        <script type="text/javascript">
          countDown();
        </script>
      </p>
    </div>
  <!-- /#logo-box -->
</div>
<!-- /#master-wrap -->

 

 

 

HTML Redirect Code.htm

Link to comment
Share on other sites
Link to post
Share on other sites
Posted (edited)

Your code works fine in a local file, just not on JSFiddle. My guess is they are blocking it for security reasons.

Rather than relying on a third party service, just create a html file and load it in your browser. Javascript is all client sided, you don't need a "emulator".

Edited by Nayr438
Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
10 hours ago, Nayr438 said:

Your code works fine in a local file, just not on JSFiddle. My guess is they are blocking it for security reasons.

Rather than relying on a third party service, just create a html file and load it in your browser. Javascript is all client sided, you don't need a "emulator".

Thanks, I see what you mean it does work. However I'm trying to run it o n my Wix website and it just stops at 1 second.

I've tried running it as HTML code as a widget, and as part of the page, but it doesn't seem to work either way.

 

image.thumb.png.9132c68f9b9afadbbf88d90c5ca622c1.pngimage.thumb.png.4b0db471884abc4059eb2c15b3208046.png

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
On 7/2/2022 at 12:54 PM, C2dan88 said:

You cannot use standard plain javascript for wix as it embeds the custom element as an iframe which has restrictions.

 

Instead you need to use the wix api to perform the redirect using velo dev mode. Look at using wix-location.to

https://www.wix.com/velo/reference/wix-location/to to redirect the user

Hey, thanks I had no idea. However now that I know about the to( ) function, I've run into some issues and can't quite get it to work. Where would I edit my code to include the to function please? Many thanks.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Could try importing the wix-location module and replacing window.top.location.href = redirect;  with   location.to(redirect)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Like this? It still doesn't work. Sorry to be a pain!


image.thumb.png.6961351165c6574234c3c61652a157f4.png

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

Been doing some testing and come up with a solution

 

Add your redirect code as an embed html element. When adding the element look in the properties & events panel and take note of the element id

And replace this line window.top.location.href = redirect; 
with this 

// message the parent window, with the redirect url
window.parent.postMessage(redirect, "https://puzzlesofthemonth.wixsite.com"); // the origin has to match your sites domain

 

Now in the velo dev mode code panel select your page and add this code 

import wixLocation from 'wix-location';


$w.onReady(function () {
    // capture the message sent when the countdown timer reached zero
    $w("#myEmbededHTMLElementID").onMessage( (event) => {
        // the message contains the url to redirect to
        let redirectLocation = event.data;
        // redirect the user to the new location
        wixLocation.to(redirectLocation);
    });
});

Change myEmbededHTMLElementID to the id of your embed html element

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Sorry it still doesn't work. I may have done something wrong though! If it is easier I could add you to the website? Thank you for all of your help, time and effort with this @C2dan88, I really appreciate it!

---
This is the code from my embedded HTML element (#html3): 

<!DOCTYPE html>
<html>
<head>
  <base target="_parent">
<link href='https://fonts.googleapis.com/css?family=Bai Jamjuree' rel='stylesheet'>
<style>
body {
    font-family: 'Bai Jamjuree';font-size: 30px; text-indent: 150px;
}
</style>
</head>
<body>

<!-- Redirection Counter -->

<br><br><br>
<script type="text/javascript">

	let url = location.href;
  var count = 6; // Timer
  var redirect = "https://puzzlesofthemonth.wixsite.com/quiz/ks3-quizzes"; // Target URL

  function countDown() {
    var timer = document.getElementById("timer"); // Timer ID
    if (count > 1) {
      count--;
      timer.innerHTML = "This page will redirect to the current page in " + count + " seconds."; // Timer Message
      setTimeout("countDown()", 1000);
    } else {
      window.top.location.href = redirect;
    }
  }
</script>

<div id="master-wrap">
  <div id="logo-box">

    <div class="animated fast fadeInUp">
      <div class="icon"><div>
      <br><br><h1>404</h1>
    </div>

    <div class="notice animated fadeInUp">
      <p class="lead">The page you are trying to access has moved location.</p>
    </div>

    <div class="footer animated slow fadeInUp">
      <p id="timer">
        <script type="text/javascript">
          countDown();
        </script>
      </p>
    </div>
  <!-- /#logo-box -->
</div>
<!-- /#master-wrap -->

This is the velo dev code: 

import wixLocation from 'wix-location';


$w.onReady(function () {
    // capture the message sent when the countdown timer reached zero
    $w("#html3").onMessage( (event) => {
        // the message contains the url to redirect to
        let redirectLocation = event.data;
        // redirect the user to the new location
        wixLocation.to(redirectLocation);
    });
});

image.thumb.png.9d90d9dfb72a1b80ddfda9e2b0602f1d.png

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

there is a huge page talks about redirect visitors by browser,

the code inside looks like the thing you're looking for

https://support.wix.com/en/article/velo-tutorial-redirecting-visitors-based-on-browser-language

 

and if you want to redirect by window

also there's an answer to that

https://www.wix.com/velo/forum/coding-with-velo/page-redirect

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
5 hours ago, 747Dan said:

Sorry it still doesn't work.

You did not do this part

9 hours ago, C2dan88 said:

Add your redirect code as an embed html element ....

And replace this line 

window.top.location.href = redirect;


with this 

// message the parent window, with the redirect url
window.parent.postMessage(redirect, "https://puzzlesofthemonth.wixsite.com"); // the origin has to match your sites domain

 

 

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Sorry I forgot to click the update button on the element.

You're a life saver... it does work (apologies)!


image.thumb.png.f6b1d223a49b50ab86521b3a8a01979a.png

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
3 hours ago, Amenefus said:

there is a huge page talks about redirect visitors by browser,

the code inside looks like the thing you're looking for

https://support.wix.com/en/article/velo-tutorial-redirecting-visitors-based-on-browser-language

 

and if you want to redirect by window

also there's an answer to that

https://www.wix.com/velo/forum/coding-with-velo/page-redirect

 

Thanks man, but this has just fixed my issue. I really appreciate all the help from @C2dan88 @Amenefus @Nayr438!

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×