logo标签列表

如何重定向到另一个网页？

javascriptjqueryredirect
7702

如何使用jQuery或纯JavaScript将用户从一个页面重定向到另一个页面？

58个回答
202

只需要使用window.location就可以设置。

示例：

window.location = "https://stackoverflow.com/";

这里是有关这个主题的过去帖子：如何重定向到另一个网页？

187

在我开始之前，jQuery是用于DOM操作的JavaScript库。因此，您不应该在页面重定向时使用jQuery。

Jquery.com上的一句话：

虽然jQuery在旧版浏览器中可能没有重大问题，但我们不会积极测试它们，并且通常不会修复可能出现的错误。

在这里发现：https://jquery.com/browser-support/

因此，jQuery不是解决向后兼容性的万能解决方案。

以下使用原始JavaScript的解决方案适用于所有浏览器，并且已经成为标准已久，因此您无需使用任何库来实现跨浏览器支持。

此页面将在3000毫秒后重定向到 Google

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

使用 replace 替换时，浏览器的返回按钮将无法回到重定向页面，就好像它从未在历史记录中出现过一样。如果您希望用户能够返回到重定向页面，请使用 window.location.href 或 window.location.assign。 如果您确实使用了可以让用户返回到重定向页面的选项，请记住，当您进入重定向页面时，它会将您重定向回去。因此，在选择重定向选项时，请考虑这一点。在仅在用户完成操作时页面进行重定向的情况下，使页面保留在返回按钮历史记录中将是可以接受的。但是，如果页面自动重定向，则应该使用 replace，以便用户可以使用返回按钮而不被强制返回到重定向发送的页面。

您还可以使用元数据来运行页面重定向，如下所示。

META 刷新

<meta http-equiv="refresh" content="0;url=http://evil.example/" />

META 位置

<meta http-equiv="location" content="URL=http://evil.example" />

基础架构劫持

<base href="http://evil.example/" />

这个页面上可以找到更多将您的客户重定向到他们可能不希望访问的页面的方法（其中没有一种依赖于jQuery）：

https://code.google.com/p/html5security/wiki/RedirectionMethods

我还想指出，人们不喜欢被随机重定向。只有在绝对必要时才进行重定向。如果你开始随机重定向人们，他们永远不会再去你的网站。

下一段是假设情况：

你还可能被报告为恶意网站。如果发生这种情况，当人们点击链接访问你的网站时，用户的浏览器可能会警告他们你的网站是恶意的。搜索引擎也可能开始降低你的排名，如果人们报告在你的网站上有不良体验的话。

请查看谷歌网络管理员指南中关于重定向的内容： https://support.google.com/webmasters/answer/2721217?hl=zh-Hans&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>
如果您将两个页面示例结合在一起，就会形成一个婴儿般的重定向循环，这将确保您的用户永远不想再使用您的网站。
175
var url = 'asdf.html';
window.location.href = url;
151

你可以不使用 jQuery 来实现这个功能：

window.location = "http://yourdomain.com";

如果你只想使用jQuery，那么可以这样做：

$jq(window).attr("location","http://yourdomain.com");
149

这个可以使用jQuery实现：

$(window).attr("location", "http://google.fr");
101

# 使用jQuery / JavaScript方法进行HTML页面重定向

尝试此示例代码：

function YourJavaScriptFunction()
{
    var i = $('#login').val();
    if (i == 'login')
        window.location = "Login.php";
    else
        window.location = "Logout.php";
}

如果你想要提供一个完整的URL，可以使用window.location = "www.google.co.in";。

90

原问题：“如何使用jQuery进行重定向？”，因此答案实现了jQuery >> 互补使用案例。

只需使用JavaScript重定向到页面：

window.location.href = "/contact/";

或者如果您需要延迟:

setTimeout(function () {
  window.location.href = "/contact/";
}, 2000);   // Time in milliseconds

jQuery允许您轻松选择网页中的元素。 您可以在页面上找到任何想要的内容，然后使用jQuery添加特殊效果，响应用户操作或显示和隐藏所选元素内部或外部的内容。 所有这些任务都始于了解如何选择元素或事件。

$('a,img').on('click',function(e){
  e.preventDefault();
  $(this).animate({
    opacity: 0 //Put some CSS animation here
  }, 500);
  setTimeout(function(){
    // OK, finished jQuery staff, let's go redirect
    window.location.href = "/contact/";
  },500);
});

想象一下，有人写了10000行代码的脚本/插件。使用jQuery，你只需要一两行代码就可以连接到这个代码。

82

那么问题是如何制作一个重定向页面，而不是如何重定向到一个网站？

您只需要使用JavaScript即可。这里有一些简短的代码，可以创建一个动态重定向页面。

<script>
    var url = window.location.search.split('url=')[1]; // Get the URL after ?url=
    if( url ) window.location.replace(url);
</script>

假设你将以下代码片段放入网站上的 redirect/index.html 文件中，你可以通过以下方式使用它：

http://www.mywebsite.com/redirect?url=http://stackoverflow.com

如果你访问该链接，它将自动将你重定向到stackoverflow.com。

文档链接

这就是如何使用JavaScript创建一个简单的重定向页面

编辑：

还有一件事需要注意。我在代码中添加了window.location.replace，因为我认为它适合重定向页面，但是，你必须知道，使用window.location.replace进行重定向后，在浏览器中按下“返回”按钮时，将不会返回到重定向页面，而会返回到之前的页面。看一下这个小演示。

示例：

过程：商店首页 => 重定向到谷歌页面 => 谷歌页面

当在谷歌页面时：谷歌页面 => 浏览器中的返回按钮 => 商店首页

因此，如果这符合你的需求，一切应该没问题。如果你想将重定向页面包含在浏览器历史记录中，请使用以下内容替换：

if( url ) window.location.replace(url);

与

if( url ) window.location.href = url;
82

你需要在你的代码中加入这一行：

$(location).attr("href","http://stackoverflow.com");

如果您没有jQuery，可以使用JavaScript：

window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");
79

在您的单击函数中，只需添加：

window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
    window.location.href = "http://www.google.com";
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接