当前位置 : 首页 » 互动问答 » 正文

如何重定向到其他网页?

分类 : 互动问答 | 发布时间 : 2009-02-02 20:54:16 | 评论 : 30 | 浏览 : 5158839 | 喜欢 : 7822

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

回答(30)

  • 1楼
  • 一个不是简单地使用jQuery重定向

    jQuery不是必需的,而 window.location.replace(...)将最好地模拟HTTP重定向。

    window.location.replace(...)优于使用 window.location.href , because replace()不会将原始页面保留在会话历史记录中,这意味着用户不会陷入永无止境的后退按钮fiasco。

    如果要模拟某人点击某个链接,请使用    location.href

    如果要模拟HTTP重定向,请使用 location.replace

    例如:

     //与HTTP重定向类似的行为
    window.location.replace( “http://stackoverflow.com”);
    
    //与点击链接类似的行为
    window.location.href =“http://stackoverflow.com”;
  • 2楼
  • WARNING:这个答案仅作为可能的解决方案提供;它显然是not最好的解决方案,因为它需要jQuery。相反,更喜欢纯JavaScript解决方案。

     $(location).attr('href','http://stackoverflow.com')
  • 3楼
  • 标准的“vanilla”JavaScript重定向页面的方式:

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


    如果你在这里是因为你在重定向时是losing HTTP_REFERER,请继续阅读:


    以下部分适用于那些使用 HTTP_REFERER 作为许多安全措施之一的人(虽然这不是一个很好的保护措施)。如果您使用 Internet Explorer 8 或更低版本,则在使用任何形式的JavaScript页面重定向(location.href等)时,这些变量都会丢失。

    下面我们将要为 IE8&lower 实现一个替代方法,这样我们就不会丢失HTTP_REFERER。否则你几乎总是可以简单地使用 window.location.href .

    针对 HTTP_REFERER 进行测试(URL粘贴,会话等)can有助于判断请求是否合法。 (Note:还有解决这些引用的方法,正如评论中的droop链接所示)


    简单的跨浏览器测试解决方案(回退到Internet Explorer 9的window.location.href) +和所有其他浏览器)

    Usage: 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及更低版本
        if(isIE && version <9){
            var link = document.createElement('a');
            link.href = url;
            document.body.appendChild(链接);
            link.click();
        }
    
        //所有其​​他浏览器都可以使用标准的window.location.href(它们不会丢失HTTP_REFERER,如Internet Explorer 8及更低版本)
        其他{
            window.location.href = url;
        }
    }
  • 4楼
  • Use:

    // window.location
    window.location.replace( 'http://www.example.com')
    window.location.assign( 'http://www.example.com')
    window.location.href ='http://www.example.com'
    document.location.href ='/ path'
    
    // window.history
    window.history.back()
    window.history.go(-1)
    
    // window.navigate;仅适用于旧版本的Internet Explorer
    window.navigate( 'top.jsp')
    
    
    //可能没有bueno
    self.location ='http://www.example.com';
    top.location ='http://www.example.com';
    
    // jQuery
    $(位置).attr( 'href' 属性, 'HTTP://www.example.com中')
    $(窗口).attr( '位置', 'HTTP://www.example.com中')
    $(location).prop('href','http://www.example.com')
  • 5楼
  • 这适用于每个浏览器:

     window.location.href ='your_url';
  • 6楼
  • 如果您对自己想做的事情有一点描述性,那将会有所帮助。如果您尝试生成分页数据,则有一些选项可用于执行此操作。您可以为希望能够直接访问的每个页面生成单独的链接。

     <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获取下一页并使用新数据更新表。下面的示例假定您有一个返回新页面数据的Web服务。

     $(document).ready(function(){
        $('a.pager-link')。click(function(){
            var page = $(this).attr('href')。split(/ \?/)[1];
            $就({
                输入:'POST',
                url:'/ path-to-service',
                数据:页面,
                成功:功能(内容){
                   $( '#myTable的')HTML(内容); //替换
                }
            });
            返回虚假; //停止链接
        });
    });
  • 7楼
  • 我还认为 location.replace(URL)是最好的方法,但是如果你想通知搜索引擎你的重定向(他们不分析JavaScript代码以查看重定向),你应该将 rel =“canonical”元标记添加到你的网站。

    添加带有HTML刷新元标记的noscript部分也是一个很好的解决方案。我建议你使用这个 JavaScript重定向工具来创建重定向。它还支持Internet Explorer以传递HTTP引用程序。

    示例代码没有延迟如下所示:

     <! - 打开head标签后立即放置此代码段以使其正常工作 - >
    
    <! - 此代码在GNU GPL v3  - >下获得许可
    <! - 您可以自由复制,分发和使用此代码,但严禁删除作者信用 - >
    <! - 由http://insider.zone/tools/client-side-url-redirect-generator/生成 - >
    
    <! - 重定向开始 - >
    <link rel =“canonical”href =“https://yourdomain.com/”/>
    <NOSCRIPT>
        <meta http-equiv =“refresh”content =“0; URL = https://yourdomain.com/”>
    </ NOSCRIPT>
    <! -  [if lt IE 9]> <script type =“text / javascript”> var IE_fix = true; </ script> <![endif]  - >
    <script type =“text / javascript”>
        var url =“https://yourdomain.com/”;
        if(typeof IE_fix!=“undefined”)// IE8和更低版本修复以传递http referer
        {
            文件撰写( “重定向...”); //不要删除这一行,否则appendChild()将失败,因为在document.onload之前调用它以尽可能快地进行重定向。没有人会看到这个文本,它只是一个技术修复。
            var referLink = document.createElement(“a”);
            referLink.href = url;
            document.body.appendChild(referLink);
            referLink.click();
        }
        else {window.location.replace(url); } //所有其​​他浏览器
    </ SCRIPT>
    <! -  Credit转到http://insider.zone/  - >
    <! -  REDIRECTING ENDS  - >
  • 8楼
  • 但如果有人想重定向回主页,那么他可能会使用以下代码段。

     window.location = window.location.host
    

    如果您有三个不同的环境,如开发,登台和制作,将会很有帮助。

    您可以通过将这些单词放在Chrome控制台或Firebug的控制台中来浏览此窗口或window.location对象。

  • 9楼
  • JavaScript为您提供了许多方法来检索和更改浏览器地址栏中显示的当前URL。所有这些方法都使用Location对象,它是Window对象的属性。您可以创建一个具有当前URL的新Location对象,如下所示。

     var currentLocation = window.location;
    

    URL的基本结构

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

    enter image description here

    1. 协议 - 指定用于访问Internet上资源的协议名称。 (HTTP(不使用SSL)或HTTPS(使用SSL))

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

    3. port - 用于识别Internet或其他网络消息在到达服务器时要转发到的特定进程的端口号。

    4. pathname - - 该路径提供有关Web客户端要访问的主机中的特定资源的信息。例如,stackoverflow.com / index.html。

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

    6. hash - URL的锚点部分,包括井号(#)。

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

    1. hash -Sets或返回URL的锚点部分。
    2. host -Sets 或返回URL的主机名和端口。
    3. hostname -Sets或 返回URL的主机名。
    4. href - 设置或返回整个 URL。
    5. pathname - 设置或返回URL的路径名。
    6. port - 设置或返回服务器用于URL的端口号。
    7. protocol - 设置或返回URL的协议。
    8. search -Sets 或者返回URL的查询部分

    现在如果要更改页面或将用户重定向到其他页面,可以使用Location对象的href属性,如下所示

    可以使用href属性Location对象。

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

    Location Object 也有这三种方法

    1. assign() - 加载一个新文档。
    2. reload() - 重新加载当前文档。
    3. replace() - 用新文件替换当前文档

    你也可以使用assign()和replace方法重定向到其他页面,如

     location.assign(“http://www.stackoverflow.com”);
    
    location.replace( “http://www.stackoverflow.com”);
    

    assign()和replace()如何不同 - replace()方法和assign()方法()之间的区别在于replace()从文档历史中删除当前文档的URL,意味着无法使用“后退”按钮导航回原始文档。因此,如果要加载新文档,请使用assign()方法,并希望选择导航回原始文档。

    您可以使用jQuery更改位置对象href属性,也可以像这样

     $(位置).attr( 'href' 属性,URL);
    

    因此您可以将用户重定向到其他网址。

  • 10楼
  • 应该只能使用 window.location .

    Example:

     window.location =“https://stackoverflow.com/”;
    

    以下是关于该主题的过去帖子:

    如何重定向到其他网页?

  • 11楼
  • 在开始之前,jQuery是一个用于DOM操作的JavaScript库。因此,您不应该使用jQuery进行页面重定向。

    来自Jquery.com的引用:

    虽然jQuery可能在旧浏览器版本中运行时没有出现重大问题,   我们不主动测试jQuery,一般不修复bug   可能会出现在它们中。

    在这里找到: https://jquery.com/browser-support/

    因此,jQuery并不是向后兼容的最终解决方案。

    以下使用原始JavaScript的解决方案适用于所有浏览器并具有很长一段时间都是标准的,因此您不需要任何库来支持跨浏览器。

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

     <!DOCTYPE html>
    <HTML>
        <HEAD>
            <TITLE>例如</ TITLE>
        </ HEAD>
        <BODY>
            <p>您很快就会被重定向到谷歌。</ p>
            <SCRIPT>
                的setTimeout(函数(){
                    window.location.href = “http://www.google.com”; //也将重定向的URL。
                },3000); //数字越大,延迟越长。
            </ SCRIPT>
        </ BODY>
    </ HTML>
    

    不同的选项如下:

     window.location.href =“url”; //模拟新页面的常规导航
    window.location.replace( “URL”); //从历史记录中删除当前URL并将其替换为新URL
    window.location.assign( “URL”); //将新URL添加到历史堆栈并重定向到新URL
    
    window.history.back(); //模拟后退按钮单击
    window.history.go(-1); //模拟后退按钮单击
    window.history.back(-1); //模拟后退按钮单击
    window.navigate( “page.html中”); //与window.location =“url”相同
    

    使用替换时,后退按钮不会返回重定向页面,就好像它从未在历史记录中一样。如果您希望用户能够返回重定向页面,请使用 window.location.href or window.location.assign 。如果您确实使用了允许用户返回重定向页面的选项,请记住,当您进入重定向页面时,它会重定向您。因此,在为重定向选择选项时要考虑到这一点。在页面仅在用户完成操作时重定向的情况下,然后在后退按钮历史中具有页面将是可以的。但是如果页面自动重定向,那么你应该使用replace,这样用户就可以使用后退按钮而不会强制返回重定向发送的页面。

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

    META Refresh

     <meta http-equiv =“refresh”content =“0; url = http://evil.com/”/>
    

    META位置

     <meta http-equiv =“location”content =“URL = http://evil.com”/>
    

    BASE Hijacking

     <base href =“http://evil.com/”/>
    

    可以在此页面上找到更多将您的毫无疑问的客户端重定向到他们可能不希望访问的页面的方法(其中一个不依赖于jQuery):

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

    我还想指出,人们不喜欢被随机重定向。仅在绝对需要时重定向人员。如果您开始随机重定向人员,他们将永远不会再次访问您的网站。

    下一部分是假设:

    您也可能被报告为恶意网站。如果发生这种情况,那么当用户点击指向您网站的链接时,用户浏览器可能会警告他们您的网站是恶意的。如果有人在您的网站上报告不良体验,搜索引擎可能会开始降低您的评分。

    请查看有关重定向的Google网站管理员指南: https://support.google.com/webmasters/answer/2721217?hl=zh-CN&ref_topic=6001971

    这是一个有趣的小页面,可以帮助您摆脱页面。

     <!DOCTYPE html>
    <HTML>
        <HEAD>
            <title>离开</ title>
        </ HEAD>
        <BODY>
            <h1>离开</ h1>
            <SCRIPT>
                的setTimeout(函数(){
                    window.history.back();
                },3000);
            </ SCRIPT>
        </ BODY>
    </ HTML>
    

    如果您将两个页面示例组合在一起,您将拥有一个婴儿循环重新路由,这将保证您的用户永远不会再想要再次使用您的网站。

  • 12楼
  • Basically jQuery is just a JavaScript framework 在这种情况下,为了做一些像 redirection 这样的事情,你可以使用纯JavaScript,所以在这种情况下你有3个选项使用vanilla JavaScript:

    1)使用位置replace,这将替换页面的当前历史记录,意味着无法使用back按钮返回原始页面。

     window.location.replace(“http:// stackoverflow .COM“);
    

    2)使用location assign,这将为您保留历史记录,使用后退按钮,您可以返回原始页面:

     window.location.assign(“http://stackoverflow.com “);
    

    3)我建议使用以前的方法之一,但这可能是使用纯JavaScript的第三个选项:

     window.location.href =“http://stackoverflow.com”;
    

    您也可以在jQuery中编写一个函数来处理它,但不推荐使用它,因为它只有一行纯JavaScript函数,如果您已经在窗口范围内,也可以使用所有上述函数而不使用窗口,例如<notranslate > window.location.replace(“http://stackoverflow.com”); location.replace(“http://stackoverflow.com”); could be 我还在下面的图片中显示所有内容:

    Also I show them all on the image below:

    location.replace location.assign

  • 13楼
  • var url ='asdf.html';
    window.location.href = url;
  • 14楼
  • 你可以在没有jQuery的情况下做到这一点:

     window.location =“http://yourdomain.com”;
    

    如果你只想要jQuery那么你就可以这样做:

     $ jq(window).attr(“location”,“http://yourdomain.com”);
  • 15楼
  • 这适用于jQuery:

     $(window).attr(“location”,“http://google.fr”);
  • 16楼
  • #HTML页面重定向使用jQuery / JavaScript

    试试这个示例代码:

     function YourJavaScriptFunction()
    {
        var i = $('#login')。val();
        if(i =='login')
            window.location =“login.php”;
        其他
            window.location =“Logout.php”;
    }
    

    如果您想提供完整的网址 window.location =“www.google.co.in”;.

  • 17楼
  • 那么,问题是如何制作重定向页面,而不是如何重定向到网站?

    您只需要使用JavaScript。以下是一些可以创建动态重定向页面的小代码。

     <script>
        var url = window.location.search.split('url =')[1]; //在url =之后获取URL
        if(url)window.location.replace(url);
    </ SCRIPT>
    

    所以说你只是把这个片段放到你网站上的 redirect / index.html 文件中就可以这样使用了。

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

    如果您转到该链接,它将自动将您重定向到 stackoverflow.com .

    链接到文档

    这就是您如何制作Simple重定向页面使用JavaScript

    Edit:

    还有一点需要注意。我在我的代码中添加了 window.location.replace 因为我认为它适合重定向页面,但是,你必须知道当使用 window.location.replace 并且你被重定向时,当你在浏览器中按下后退按钮时它将not返回到重定向页面,它将返回到它之前的页面,看看这个小小的演示内容。

    Example:

    进程:store home => 将页面重定向到谷歌 => google

    在google:google => 浏览器中的后退按钮 => store home

    所以,如果这符合您的需求,那么一切都应该没问题。如果要在浏览器历史记录中包含重定向页面,请替换此

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

    with

     if(url)window.location.href = url;
  • 18楼
  • 在您的点击功能上,只需添加:

     window.location.href =“您要重定向的网址”;
    $( '#ID')。点击(函数(){
        window.location.href =“http://www.google.com”;
    });
  • 19楼
  • 您需要在代码中添加以下行:

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

    如果您没有jQuery,请使用以下命令运行JavaScript:

     window.location.replace(“http://stackoverflow.com”);
    window.location.href( “http://stackoverflow.com”);
  • 20楼
  • *****原始问题是 - “如何使用JQUERY重定向”,HANS THE ANSWER IMPLEMENTS JQUERY >>免费使用案例*****

    只需重定向到使用JavaScript的页面:

    窗口。 location.href =“/ contact /”;
    

    或者如果您需要延迟:

     setTimeout(function(){
      window.location.href =“/ contact /”;
    ,2000); //以毫秒为单位的时间
    

    jQuery允许您轻松地从网页中选择元素。您可以在页面上找到任何想要的内容,然后使用jQuery添加特效,对用户操作做出反应,或者显示和隐藏您选择的元素内部或外部的内容。所有这些任务都从知道如何选择元素或事件开始.

     $('a,img')。on('click',function(e){
             e.preventDefault();
             $(本).animate({
                 不透明度:0 //在这里放一些CSS动画
             },500);
             的setTimeout(函数(){
               //好的,完成jQuery的工作人员,让我们去重定向
               window.location.href =“/ contact /”;
             },500);
         });
    

    想象一下有人写了10000行代码的脚本/插件?! 好吧,使用jQuery,您只需一两行即可连接到此代码。

  • 22楼
  • 不需要jQuery。你可以这样做:

     window.open(“URL”,“_ self”,“”,“”)
    

    就是这么简单!

    发起HTTP请求的最佳方法是使用 document.loacation.href.replace('URL').

  • 23楼
  • 您可以像这样在jQuery中重定向:

     $(location).attr('href','http://yourPage.com/');
  • 24楼
  • 先写好吧。您希望在应用程序中导航,从您的应用程序中为另一个链接导航。以下是代码:

     window.location.href =“http://www.google.com”;
    

    如果您想在应用程序中导航页面,那么如果您愿意,我也可以使用代码。

  • 25楼
  • 使用Javascript:

     window.location.href = 'www.your_url.com';
    window.top.location.href = 'www.your_url.com';
    window.location.replace( 'www.your_url.com');
    

    Jquery:

     var url ='www.your_url.com';
    $(位置).attr( 'href' 属性,URL);
    $(location).prop('href',url); //而不是位置,你可以使用窗口
  • 26楼
  • 在JavaScript和jQuery中,我们可以使用以下代码将一个页面重定向到另一个页面:

     window.location.href =“http://google.com”;
    window.location.replace( “page1.html”);
  • 27楼
  • ECMAScript 6 + jQuery,85字节

     $({jQueryCode:(url)=> location.replace(url)})。attr(“jQueryCode”)(“http://example.com”)
    

    请不要杀我,这是个玩笑。这是个玩笑。 这是一个笑话。

    这确实“提供了一个问题的答案”,从某种意义上说它要求一个“使用jQuery”的解决方案,在这种情况下需要以某种方式强制它进入等式。

    Ferrybig显然需要解释这个笑话(仍然开玩笑,我确信评论表上的选项有限),所以不用多说:

    其他答案是不必要地使用jQuery的attr() on the location or window对象。

    这个答案也滥用它,但以一种更荒谬的方式。它不使用它来设置位置,而是使用attr()来检索设置位置的函数。

    该函数被命名为jQueryCode,即使没有关于它的jQuery,并且调用函数 somethingCode 只是可怕的,特别是当某些东西甚至不是一种语言时。

    “85字节”是对Code Golf的引用。高尔夫显然不是你应该在代码高尔夫之外做的事情,而且这个答案显然实际上并不是高尔夫球。

    基本上,畏缩。

  • 28楼
  • 这是一个延时重定向。您可以将延迟时间设置为您想要的任何内容:

     <!doctype html>
    <html lang =“en”>
    
    <HEAD>
        <meta charset =“UTF-8”>
        <title>您的文档标题</ title>
        <script type =“text / javascript”>
            function delayer(延迟){
                onLoad = setTimeout('window.location.href =“http://www.google.com/”',延迟);
            }
        </ SCRIPT>
    </ HEAD>
    
    <BODY>
        <SCRIPT>
            延迟(8000)
        </ SCRIPT>
        <div>您将在8秒内重定向!</ div>
    </ BODY>
    
    </ HTML>
  • 29楼
  • 有三种主要方法,

     window.location.href ='blaah.com';
    window.location.assign( 'blaah.com');
    

    and...

     window.location.replace( 'blaah.com');
    

    对于传统的重定向,最后一个是最好的,因为它不会保存您在搜索历史记录中重定向之前所访问的页面。但是,如果您只想使用JavaScript打开选项卡,则可以使用上述任何选项。1

    EDIT: The window前缀是可选的。

  • 30楼
  • 我只需要用另一个更新的jQuery方法来更新这种荒谬:

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

相关阅读:

Remove duplicates from an array of objects in JavaScript

Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

Check whether a string matches a regex in JS

jQuery event to trigger action when a div is made visible

jQuery event to trigger action when a div is made visible

Check if user is using IE with jQuery

Check if user is using IE with jQuery

Resize HTML5 canvas to fit window

How do I replace a character at a particular index in JavaScript?