Why won't my code redirect from one html page to another one?

Question

I'm trying to redirect with javascript after a 3-second delay, but my code currently does nothing. index.html is supposed to redirect to menupage.html after a 3-second delay, but nothing happens. menupage.html has 4 buttons on it: "Device motion" uses Phonegap's accelerometer and compass to show the device's speed and direction, and the other 3 just open new pages in Phonegap's in-app browser. Here is the code:

EDIT: It was just a file location error. The redirect works. Thank you!

<!--index.html-->
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />

<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="JQueryMobile/jquery.mobile-1.2.0.css" rel="stylesheet" />
    <script src="JQueryMobile/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="JQueryMobile/jqm-docs.js" type="text/javascript"></script>
    <script src="JQueryMobile/jquery.mobile-1.2.0.js" type="text/javascript"></script>
    <link rel="stylesheet" href="styles/styles.css" />
</head>
<body onload="redirect()">
    <img id="load-img" src="loading.jpg" />
    <script src="scripts/scripts.js"></script>
</body>
</html>

<!--menupage.html-->
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />

<head>
    <title>Menu</title>
    <script type="text/javascript" src="phonegap.js"></script>
    <link href="styles/styles.css" rel="stylesheet" />
</head>
<body>
    <button id="devmotion" onclick="getMotion()">Device Motion</button>
    <button id="ucla" onclick="openUCLA()">UCLA</button>
    <button id="espn" onclick="openESPN()">ESPN</button>
    <button id="google" onclick="openGoogle()">Google</button>
    <script src="scripts/scripts.js"></script>
    <script src="scripts/jquery-2.1.1.min.js"></script>
</body>
</html>

<!--devicemotion.html-->
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=1.0" />

<head>
    <title>Acceleration and Compass Direction</title>
    <script type="text/javascript" src="phonegap.js"></script>
    <link href="styles/styles.css" rel="stylesheet" />
</head>
<body>
    <div id="accel"></div>
    <div id="compassdirection"></div>
    <button id="goback" onclick="backToMenu()">Back</button>
    <script src="scripts/scripts.js"></script>
    <script src="scripts/jquery-2.1.1.min.js"></script>
</body>
</html>

<!--scripts.js-->
// JavaScript source code

function redirect() {
    window.setTimeout(function() {
        window.location.replace("menupage.html");  
    }, 3000)
}

function getMotion() {
    window.location = "devicemotion.html";
    //window.open("devicemotion.html", "_self", "location=yes");
    navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);
    navigator.compass.getCurrentHeading(compassSuccess, compassError);
}

function backToMenu() {
    window.location = "menupage.html";
}

function accelerometerSuccess(acceleration) {
    acclrtn = 'Acceleration X: ' + acceleration.x + '\n' +
          'Acceleration Y: ' + acceleration.y + '\n' +
          'Acceleration Z: ' + acceleration.z + '\n' +
          'Timestamp: '      + acceleration.timestamp + '\n';
    document.getElementById("accel").innerHTML = acclrtn;
};

function accelerometerError(error) {
    alert("Accelerometer error: " + accelerometer.code);
}

function compassSuccess(heading) {
    direction = "Direction: " + heading.magneticHeading;
    document.getElementById("compassdirection").innerHTML = direction;
}

function compassError(error) {
    alert("Compass error: "+error.code);
}

function openUCLA() {
    window.open('www.ucla.edu', '_blank', 'location=yes');
}

function openESPN() {
    window.open('www.espn.com', '_blank', 'location=yes');
}

function openGoogle() {
    window.open('www.google.com', '_blank', 'location=yes');
}

Answer 1

it should be

window.location.href = "http://yoursite.com/menupage.html";

Update

Seems that the logic that leads up to the redirect is not working. You are defining an onload handle in the body tag <body onload="redirect()"> , the catch is that when that command executes, the redirect function does not exist yet because you are loading the js at the end of the document (which is correct). You could do 2 things.

Given that your scripts are at the end, calling a function at the end of the script would only be executed after the browser has downloaded html and js, behaving similarly to an onload event.
```
 // At the end of scripts.js // ... omitted for brevity ... function openGoogle() { window.open('www.google.com', '_blank', 'location=yes'); } // simply call the function redirect(); 
```
To catch the window.onload event properly with cross browser compatibility is known to be a nightmare. Fortunately jQuery fixes this so you could use its initializer in case you have it or can include jQuery.
```
 $(function(){ // this only happens when the document is ready! redirect(); }); 
```

Finally your redirect function should look something like this

function redirect() {
    window.setTimeout(function() {
        window.location.href = "menupage.html";
        // if you need to replace a part of the current url
        // for example going from http://example.com/summer/index.html
        // to http://example.com/winter/index.html you can
        // window.location.href = window.location.href.replace('summer', 'winter');
    }, 3000)
}

Answer 2

Have you tried using php to redirect? I believe it would be much easier to use.

header( "refresh:3;url=menupage.html" );

Why won't my code redirect from one html page to another one?

Question

2 answers

solution1
2 2015-07-10 22:47:13

solution2
0 2015-07-10 22:59:15

Why won't my code redirect from one html page to another one?

Question

2 answers

solution1 2 2015-07-10 22:47:13

solution2 0 2015-07-10 22:59:15

solution1
2 2015-07-10 22:47:13

solution2
0 2015-07-10 22:59:15