javascript - 为什么我的代码不能从一个 html 页面重定向到另一页面？

我尝试在 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.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();

要 catch 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)
}

关于javascript - 为什么我的代码不能从一个 html 页面重定向到另一页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31351432/

javascript - 为什么我的代码不能从一个 html 页面重定向到另一页面？

上一篇：javascript - meteor 收藏现场搜索

下一篇：javascript - 了解 Node.js 服务器目录结构和安全性