使用jQuery或纯 JavaScript 如何将用户从一页转到另一页?
当前回答
在我开始之前, jQuery 是用于 DOM 操作的 JavaScript 库。 所以您不应该使用 jQuery 重定向页面 。
Jquery.com的一段引文:
虽然jQuery在旧浏览器版本中可能运行没有大问题,但我们并不积极测试jQuery在其中的位置,而且通常不修补其中可能出现的错误。
发现于此:https://jquery.com/browser-support/
所以jQuery并不是一个终极和万能的解决方案 解决逆向兼容性。
以下使用原始 JavaScript 的解决方案在所有浏览器中都起作用, 并且已经相当长的时间达到了标准, 所以您不需要任何库来支持交叉浏览器 。
此页面将重定向到谷歌谷歌3000毫秒后
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p>You will be redirected to google shortly.</p>
<script>
setTimeout(function(){
window.location.href="http://www.google.com"; // The URL that will be redirected too.
}, 3000); // The bigger the number the longer the delay.
</script>
</body>
</html>
不同的备选办法如下:
window.location.href="url"; // Simulates normal navigation to a new page
window.location.replace("url"); // Removes current URL from history and replaces it with a new URL
window.location.assign("url"); // Adds new URL to the history stack and redirects to the new URL
window.history.back(); // Simulates a back button click
window.history.go(-1); // Simulates a back button click
window.history.back(-1); // Simulates a back button click
window.navigate("page.html"); // Same as window.location="url"
使用替换时, 后端按钮将不再返回重置页面, 仿佛它从来没有在历史中出现过。 如果您想要用户能够返回重置页面, 请使用window.location.href
或window.location.assign
。如果您确实使用让用户返回重定向页面的选项,请记住,当您输入重定向页面时,它会将您重新定向。因此,在选择重定向选项时会考虑到这一点。如果该页面仅在用户采取行动时才被重定向,那么在后按钮历史中拥有页面就没事了。但如果页面自动重定向,那么您应该使用替换,这样用户就可以使用后端按钮,而不必被迫返回重定向发送的页面。
您也可以使用元数据运行页面重定向 。
META 刷新
<meta http-equiv="refresh" content="0;url=http://evil.example/" />
METTA 地点
<meta http-equiv="location" content="URL=http://evil.example" />
BASE 劫持
<base href="http://evil.example/" />
有许多方法可以将您未预料到的客户端转到他们可能不希望访问的页面上(其中没有一个是依赖jQuery):
https://code.google.com/p/html5security/wiki/RedirectionMethods
我还要指出,人们不喜欢随机调整方向。 只有在绝对需要的时候才会调整方向。 如果您开始随机调整方向, 他们就不会再去你的网站了 。
下一段是假设性的:
您也可以被报告为恶意网站。如果发生这种情况,当人们点击与您网站的链接时,用户浏览器可能会警告他们您的网站是恶意的。同样可能发生的是搜索引擎可能会开始降低您的评级,如果有人在您的网站上报告有不良经历的话。
请审查Google网站技术主管指南关于改方向的内容:https://support.google.com/webmasters/answer/2721217?hl=en&ref_topic=6001971
这是一个有趣的小页 踢你出页面。
<!DOCTYPE html>
<html>
<head>
<title>Go Away</title>
</head>
<body>
<h1>Go Away</h1>
<script>
setTimeout(function(){
window.history.back();
}, 3000);
</script>
</body>
</html>
如果您将两个页面示例合并在一起, 你会有一个新生的路线改变循环, 这将保证您的用户将永远不再想要使用您的网站 。
其他回答
我只是不得不更新这种荒谬的 另一种新的jQuery方法:
var url = 'http://www.fiftywaystoleaveyourlocation.com';
$(location).prop('href', url);
我也认为location.replace(URL)
这是最好的方法, 但是如果您想要通知搜索引擎您的调整方向( 他们不分析 JavaScript 代码来查看调整方向) , 您应该添加rel="canonical"
网站的元标签 。
添加带有 HTML 刷新元标记的标注部分, 也是一个很好的解决方案 。 我建议您使用此JavaScript 调整方向工具以创建再定向。它也拥有互联网探索者支持以通过 HTTP 查询器 。
毫不延迟的样本代码看起来是这样的:
<!-- Place this snippet right after opening the head tag to make it work properly -->
<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->
<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://yourdomain.example/"/>
<noscript>
<meta http-equiv="refresh" content="0;URL=https://yourdomain.example/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
var url = "https://yourdomain.example/";
if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
{
document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
}
else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->
使用location.replace()
这将调整您的方向, 但不保存上一页的历史。 提交表格时最好使用此选项 。
但当你想保留自己的历史时,你必须使用location.href=//path
.
实例:
// Form with steps
document.getElementById('#next').onclick = function() {
window.location.href='/step2' // Iteration of steps;
}
// Go to next step
document.getElementById('#back').onclick = function() {
window.history.back();
}
// Finish
document.getElementById('#finish').onclick = function() {
window.location.href = '/success';
}
// On success page
window.onload = function() {
setTimeout(function() {
window.location.replace('/home'); // I can't go back to success page by pressing the back button
},3000);
}
使用 :
function redirect(a) {
location = a
}
并称之为:redirect([url]);
没必要href
之后location
,因为它是隐含的。
您可以在没有jQuery 的情况下这样做 :
window.location = "http://yourdomain.com";
如果你只想要jQuery, 你可以做它喜欢:
$jq(window).attr("location","http://yourdomain.com");