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


当前回答

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上。

其他回答

标准“ vanilla” JavaScript 重定向页面的方法

window.location.href = 'newPage.html';

或更简单: (自window全球)

location.href = 'newPage.html';

如果你在这里,因为你损失HTTP_REFERERER 重定向时, 继续读取 :

(否则忽略此最后部分)


下一节针对的是那些使用HTTP_REFERER作为许多安全措施之一的安全措施(尽管这不是一个伟大的保护措施)。因特网探索者 8使用任何形式的 JavaScript 页面重定向( 位置.href 等) 时, 这些变量会丢失 。

我们将在下面实施一个替代方案:IE8 更低这样我们就不会失去 HTTP_REFERER。 否则,你几乎总是可以简单地使用 HTTP_REFERERER。window.location.href.

测试HTTP_REFERER(URL 粘贴、 会话等)能够帮助判断请求是否合法 。(注:正如Droop在评论中指出的,也有一些办法可以对这些裁判员进行变通/补充)


简单的交叉浏览器测试解决方案( 返回窗口. place.href 用于 Internet Explorer 9+ 和所有其他浏览器)

用法 :redirect('anotherpage.aspx');

function redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        isIE      = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // Internet Explorer 8 and lower
    if (isIE && version < 9) {
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
    }

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 
    }
}

单页应用在同一申请路线内

window.location.pathname = '/stack';

JavaScript :

location.href = "http://stack.com";
window.location = "http://stack.com";

jj 查询 :

$(location).attr('href', "http://www.stack.com");
$(window).attr('location', "http://www.stack.com");

角形 4

import { Router } from '@angular/router';
export class NavtabComponent{
    constructor(private router: Router) {
    }
    this.router.navigate(['bookings/taxi']);
}

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

<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
    });
});

jj 查询,使用$(location).attr('href', url):

$(document).ready(function(){
    var url = "https://www.youtube.com/watch?v=JwMKRevYa_M";
    $(location).attr('href', url); // Using this
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

原始 JavaScript 贾斯克里普特实现这一点有若干途径:

window.location.href="https://www.youtube.com/watch?v=JwMKRevYa_M";

- 明确设定 href 属性。

window.location = "http://www.GameOfThrones.com";

- 是否暗含它 因为窗口。 位置返回一个对象, 默认设置它的. href 属性 。

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

- 将当前窗口的位置替换为新窗口。

self.location = "http://www.somewebsite.com";

- 设置当前窗口本身的位置。

以下是JavaScript在一定时间(3秒)后重新定向的例子:

<script>
    setTimeout(function() {
        window.location.href = "https://www.youtube.com/";
    }, 3000);
</script>

但如果有人想重回主页 他可能会使用下面的片段

window.location = window.location.host

如果你有三种不同的环境,如发展、中转和生产,将会很有帮助。

您可以将这些单词放入铬控制台, 来探索此窗口或窗口。 位置对象 。 @ info: whatsthis火虫控制台