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

【问题标题】：Why won't my code redirect from one html page to another one?为什么我的代码不会从一个 html 页面重定向到另一个页面？
【发布时间】：2015-09-29 19:58:31
【问题描述】：

我尝试在延迟 3 秒后使用 javascript 进行重定向，但我的代码目前什么都不做。 index.html 应该在 3 秒延迟后重定向到 menupage.html，但没有任何反应。 menupage.html 上有 4 个按钮：“设备运动”使用 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');
}

【问题讨论】：

window.location.replace 并没有做你认为的那样......
似乎没有什么触发redirect()。是故意的吗？
这行不是在 index.html 中触发的吗？

标签： javascript html http-redirect

【解决方案1】：

应该是

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

更新

似乎导致重定向的逻辑不起作用。您在正文标记<body onload="redirect()"> 中定义了一个onload 句柄，问题是当该命令执行时，重定向功能还不存在，因为您在文档末尾加载了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)
}

【讨论】：

为什么？请提供解释和/或资源链接。
我尝试将其更改为 window.location.href = "menupage.html";但它仍然不起作用。 window.location 也不做任何事情。
@ahmede 发布了更新，让我们知道它是否有效。

【解决方案2】：

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

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

【讨论】：