Question

我尝试在3秒延迟后使用javascript重定向，但我的代码目前什么也没做。 index.html应该在3秒延迟后重定向到menupage.html，但没有任何反应。 menupage.html上有4个按钮：＆＃34;设备运动＆＃34;使用Phonegap的加速计和指南针显示设备的速度和方向，其他3只在Phonegap的应用程序内浏览器中打开新页面。这是代码：

编辑：这只是一个文件位置错误。重定向有效。谢谢！

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

应该是

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

<强>更新

似乎导致重定向的逻辑无法正常工作。您正在正文标记onload中定义<body onload="redirect()">句柄，问题是当该命令执行时，重定向函数尚不存在，因为您正在文档的末尾加载js（是正确的）。你可以做两件事。

鉴于您的脚本已经结束，只有在浏览器下载了html和js后，才会在脚本末尾调用函数，其行为与onload事件类似。

// At the end of scripts.js
// ... omitted for brevity ...
function openGoogle() {
    window.open('www.google.com', '_blank', 'location=yes');
}

// simply call the function
redirect();

通过跨浏览器兼容性正确捕获window.onload事件已知是一场噩梦。幸运的是，jQuery修复了这个问题，因此你可以使用它的初始化程序，以防你拥有它或者可以包含jQuery。
```
$(function(){
    // this only happens when the document is ready!
    redirect();
});
```

最后你的重定向功能看起来应该是这样的

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

您是否尝试过使用php重定向？我相信它会更容易使用。

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

为什么我的代码会从一个html页面重定向到另一个html页面？

2 个答案: