为啥我的代码不会从一个 html 页面重定向到另一个页面？
Posted
技术标签:
【中文标题】为啥我的代码不会从一个 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 中触发的吗？
【参考方案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" );
【讨论】：
以上是关于为啥我的代码不会从一个 html 页面重定向到另一个页面？的主要内容，如果未能解决你的问题，请参考以下文章