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


i'm trying redirect javascript after 3-second delay, code nothing. index.html supposed redirect menupage.html after 3-second delay, nothing happens. menupage.html has 4 buttons on it: "device motion" uses phonegap's accelerometer , compass show device's speed , direction, , other 3 open new pages in phonegap's in-app browser. here code:

edit: file location error. 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 , 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'); }

it should 

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

update

seems logic leads redirect not working. defining onload handle in body tag <body onload="redirect()">, catch when command executes, redirect function not exist yet because loading js @ end of document (which correct). 2 things.

  1. given scripts @ end, calling function @ end of script executed after browser has downloaded html , js, behaving onload event. 

    // @ end of scripts.js // ... omitted brevity ... function opengoogle() {     window.open('www.google.com', '_blank', 'location=yes'); }  // call function redirect();

  2. to catch window.onload event cross browser compatibility known nightmare. fortunately jquery fixes use initializer in case have or can include jquery.

    $(function(){     // happens when document ready!     redirect(); });

finally redirect function should this

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

-

Comments

Post a Comment