使用jQuery或纯 JavaScript 如何将用户从一页转到另一页?


当前回答

简在JavaScript 贾斯克里普特,您可以通过下列方式将方向转向特定页面:

window.location.replace("http://www.test.com");

location.replace("http://www.test.com");

window.location.href = "http://www.test.com";

使用 j 查询 :

$(window).attr("location","http://www.test.com");

其他回答

在我开始之前, 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.hrefwindow.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/JavaScript 重定向用户

使用 jQuery 或 JavaScript 中的定位对象, 我们可以将用户重定向到另一个网页 。

在 jQuery 中

将用户从一页转到另一页的代码是:

var url = 'http://www.example.com';
$(location).attr('href', url);

在 JavaScript 中

将用户从一页转到另一页的代码是:

var url = 'http://www.example.com';
window.location.href = url;

var url = 'http://www.example.com';
window.location = url;

JavaScript 为您提供了许多获取和更改当前在浏览器地址栏中显示的 URL 的方法。 所有这些方法都使用位置对象, 这是窗口对象的属性。 您可以创建一个新的位置对象, 其当前 URL 如下 。

var currentLocation = window.location;

URL 基本结构

<protocol>//<hostname>:<port>/<pathname><search><hash>

enter image description here

  1. 协议 -- 指定协议名称用于访问互联网上的资源。 (HTTP(没有 SSL)或HTPS(没有 SSL))

  2. 主机名 -- -- 主机名指定拥有资源的主机名。例如,www.stackoverflow.com。一个服务器使用主机名提供服务。

  3. 端口 -- -- 用于识别因特网或其他网络电文到达服务器时要发送到的具体过程的端口号。

  4. 路径 - 路径为网络客户端想要访问的主机内的具体资源提供信息。 例如, stackoverflow. com/ index.html 。

  5. 查询 -- -- 查询字符串跟随路径组件,并提供一个资源可用于某种目的的信息字符串(例如,作为搜索的参数或作为要处理的数据)。

  6. hash - URL 的锁定部分, 包括 hash 符号 (#) 。

使用这些位置对象属性,您可以访问所有这些 URL 组件

  1. 散数- 发送或返回 URL 的锁定部分。
  2. 主机主机- 发送或返回 URL 主机名和端口。
  3. 主机名- 发送或返回 URL 主机名。
  4. 小时( href)- 设置或返回整个 URL 。
  5. 路径名- set 或返回 URL 的路径名。
  6. 端口端口- set 或返回服务器用于 URL 的端口号。
  7. 议定书议定书- 发送或返回 URL 的协议。
  8. 搜索搜索- set 或返回 URL 的查询部分

如果您现在想要更改页面或将用户重定向到其他页面, 您可以使用该页面href像这样的位置对象的属性

您可以使用位置对象的 href 属性。

window.location.href = "http://www.stackoverflow.com";

位置对象还有这三种方法

  1. (指定)- 装入新文档。
  2. 重新装入()- 重新装入当前文档。
  3. (替换)-- -- 将当前文档替换为新文档

您可以使用指派 () 并替换将重定向到其它页面的方法

location.assign("http://www.stackoverflow.com");

location.replace("http://www.stackoverflow.com");

转让 () 和替换 () 如何不同- 替换() 方法与指定() 方法() 之间的差别是,替换() 从文档历史中删除当前文档的 URL, 意思是无法使用“ 回溯” 按钮返回原始文档。所以,如果您想要装入新文档,则使用指定() 方法, 并想要给此选项返回原始文档 。

您可以使用jj 查询像这样

$(location).attr('href',url);

这样你就可以把用户 转到其他的URL上。

这是重定向到其他页面的代码 超过10秒的超时

<script>
    function Redirect()
    {
        window.location="http://www.adarshkr.com";
    }

    document.write("You will be redirected to a new page in 10 seconds.");
    setTimeout('Redirect()', 10000);
</script>

您也可以这样操作, 点击按钮时使用位置. 指派 :

<input type="button" value="Load new document" onclick="newPage()">
<script>
    function newPage() {
        window.location.assign("http://www.adarshkr.com")
    }
</script>

如果您想做更多描述的话, 这样做会有所帮助。 如果您试图生成页码数据, 这样做的方法中有一些选项。 您可以为您想要直接进入的每页创建单独的链接 。

<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...

请注意,此示例中的当前页面在代码中和与 CSS 的处理方式不同。

如果您想要通过 AJAX 更改页码数据, 则这里是 jQuery 会出现的位置。 您要做的是将点击处理器添加到与不同页面相对应的每个锁定标记中。 此点击处理器会引用一些 jQuery 代码, 该代码会通过 AJAX 去取取下一页, 并用新数据更新表格 。 下面的例子假设您有一个返回新页面数据的网络服务 。

$(document).ready( function() {
    $('a.pager-link').click( function() {
        var page = $(this).attr('href').split(/\?/)[1];
        $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});