[javascript] 如何重定向到另一个网页?


Answers

警告:这个答案只是提供了一个可能的解决方案; 这显然不是最好的解决方案,因为它需要jQuery。 相反,更喜欢纯粹的JavaScript解决方案。

$(location).attr('href', 'http://stackoverflow.com')
Question

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




先写好。 您希望在应用程序中导航,以便从您的应用程序的另一个链接进行另一个链接 这里是代码:

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

如果你想浏览应用程序中的页面,那么我也有代码,如果你想。




使用:

// 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; ONLY for old versions of Internet Explorer
window.navigate('top.jsp')


// Probably no bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';

// jQuery
$(location).attr('href','http://www.example.com')
$(window).attr('location','http://www.example.com')
$(location).prop('href', 'http://www.example.com')



我只是用另一个更新的jQuery方法来更新这个荒谬:

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



有三种主要的方法来做到这一点,

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

和...

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

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

编辑: window前缀是可选的。




jQuery是不需要的。 你可以这样做:

window.open("URL","_self","","")

这很容易!

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




ECMAScript 6 + jQuery,85个字节

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

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

这样做“提供了一个问题的答案”,因为它提出了一个“使用jQuery”的解决方案,在这种情况下需要以某种方式强迫它进入方程式。

Ferrybig显然需要这个笑话解释(仍然是在开玩笑,我敢肯定评论表上的选项是有限的),所以不要着急:

其他答案是使用jQuery的attr()不必要的locationwindow对象。

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

该函数被命名为jQueryCode ,尽管没有任何关于它的jQuery,并且调用一个函数somethingCode是非常糟糕的,尤其是当某些东西甚至不是语言时。

“85字节”是Code Golf的参考。 打高尔夫球显然不是高尔夫之外你应该做的事情,而且这个答案显然不是高尔夫球。

基本上,畏缩。




如果你对你正在做的事情有更多的描述,这将有所帮助。 如果您正在尝试生成分页数据,那么在执行此操作时有一些选项。 您可以为每个想要直接获取的页面生成单独的链接。

<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];
        $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});






这适用于jQuery:

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



只是重定向到一个页面:

  window.location.href = "/destination.html";

或者,如果您需要延迟:

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

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

function redirect () {
    $('selection').animate({
        marginLeft: 100px; //Put some CSS animation here
    }, 500, function () {
      // OK, finished jQuery staff, let's go redirect
      window.location.href = "/destination.html";
})

想象一下,有人写了一个脚本/插件是10000行的代码?! 那么,使用jQuery,你可以用一两行连接到这个代码。




基本上jQuery是一个JavaScript库,为了做一些像重定向这样的事情,你可以使用纯JavaScript,所以在这种情况下,你有3个选择使用香草JavaScript:

1)使用位置替换 ,这将取代当前的页面历史记录,意味着不可能使用后退按钮返回到原始页面。

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

2)使用位置分配 ,这将保持你的历史和使用后退按钮,你可以回到原来的页面:

window.location.assign("http://.com");

3)我推荐使用以前的方法之一,但这可能是使用纯JavaScript的第三种选择:

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

你也可以在jQuery中编写一个函数来处理它,但不建议这样做,因为它只有一行纯JavaScript函数,如果你已经在窗口范围内,你也可以使用上面所有的函数而不用窗口,比如window.location.replace("http://.com"); 可以location.replace("http://.com");

另外我在下面的图片上展示他们:




var url = 'asdf.html';
window.location.href = url;



但是如果有人想重定向回主页,那么他可能会使用下面的代码片段。

window.location = window.location.host

如果你有三个不同的环境,如开发,分期和生产,这将是有帮助的。

您只需将这些文字放在Chrome控制台或Firebug的控制台中即可浏览此窗口或window.location对象。




所以,问题是如何做一个重定向页面,而不是如何重定向到一个网站?

你只需要使用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://.com

如果你去那个链接,它会自动将你重定向到.com

链接到文档

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

编辑:

还有一件事要注意。 我已经在我的代码中添加了window.location.replace ,因为我认为它适合重定向页面,但是,您必须知道,当使用window.location.replace并重定向时,当您按下浏览器中的后退按钮时,它不会回到重定向页面,它会回到之前的页面,看看这个小演示的东西。

例:

这个过程: store home => 重定向页面到google => google

当在谷歌: 谷歌 => 后退按钮浏览器 => 存储在家中

所以,如果这符合你的需求,那么一切都应该是好的。 如果您想在浏览器历史记录中包含重定向页面,请将其替换

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

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



Related