Câu hỏi Làm cách nào để chuyển hướng đến một trang web khác?


Làm thế nào tôi có thể chuyển hướng người dùng từ trang này sang trang khác bằng cách sử dụng jQuery hoặc JavaScript thuần túy?


7737
2018-02-02 12:54


gốc


Tôi tiếp tục nhìn thấy cả window.location = url; và window.location.href = url; Họ khác nhau như thế nào? Có phải không? BTW, tôi không biết về window.location.replace (url). Tốt đẹp. - David M. Miller
window.location giống như window.location.href, về hành vi. window.location trả về một đối tượng. Nếu .href chưa được đặt, window.location mặc định để thay đổi tham số .href. Kết luận: Sử dụng một trong hai là tốt. - Raptor
var url = "tên trang web" $ (vị trí) .attr ('href', url); - Mad Scientist
@MadScientist Đó là một cách ngược lại để làm điều đó. Đối tượng vị trí không phải là một phần tử HTML và sử dụng đối tượng jquery để đặt nó có vẻ sai. Tại sao bạn sẽ sử dụng điều đó khi mã JS thẳng rất đơn giản? - Juan Mendes
Tại sao bạn muốn chuyển hướng? Không nên gửi biểu mẫu đăng nhập? Và ngay cả khi không có logic trong trang đích, bạn vẫn có thể gửi biểu mẫu tới một trang khác. - Dimt


Các câu trả lời:


Người ta không chỉ đơn giản là chuyển hướng bằng cách sử dụng jQuery

jQuery là không cần thiết, và window.location.replace(...) sẽ mô phỏng tốt nhất một chuyển hướng HTTP.

window.location.replace(...) tốt hơn là sử dụng window.location.href, bởi vì replace() không giữ trang gốc trong lịch sử phiên, có nghĩa là người dùng sẽ không gặp khó khăn trong một thất bại nút quay lại không bao giờ kết thúc.

Nếu bạn muốn mô phỏng ai đó nhấp vào liên kết, hãy sử dụng    location.href

Nếu bạn muốn mô phỏng chuyển hướng HTTP, hãy sử dụng location.replace

Ví dụ:

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

12949
2018-02-03 04:24



trong trường hợp gửi nút thêm trả về false; cũng bên trong chức năng của bạn - Abhi
Câu hỏi là về javascript cụ thể, nhưng nó có thể đáng chú ý rằng một làm mới meta có thể được sử dụng như một thất bại trở lại trong trường hợp người dùng đã tắt javascript - Hoppe
@ NicolòMartini Nếu (IE) document.write (""); - Jeff Noel
@ NicolòMartini Tôi đăng một cách không mất REFERRER dưới đây nếu bạn muốn kiểm tra xem nó ra! - Mark Pieszak - DevHelp.Online
Nếu bạn đã sử dụng jQuery, chỉ cần sử dụng $(location).attr('href',url);. window.location.href dường như có hành vi bất thường trong một số trình duyệt, trên thực tế, nó không hoạt động trong phiên bản Firefox của tôi. Tôi đã nghe nói về thiết lập window.location trực tiếp không hoạt động trong các phiên bản của IE. - Noz


CẢNH BÁO: Câu trả lời này chỉ được cung cấp như một giải pháp khả thi; rõ ràng là không phải giải pháp tốt nhất, vì nó đòi hỏi jQuery. Thay vào đó, hãy chọn giải pháp JavaScript thuần túy.

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

1473
2017-10-28 16:35



Đây là câu trả lời cho câu hỏi. Nếu bạn đã sử dụng Jquery và do đó có nó đã được nạp sau đó nó sẽ được băng thông hiệu quả hơn và tất nhiên rõ ràng hơn để sử dụng các phím tắt - barrymac
Quan trọng hơn, là có một cách để làm điều này với jQuery được absracted? Đây chỉ là một trình bao bọc cho window.location.href = url; Nhưng nếu jQuery có một số chức năng đó, nếu window.location.href = url; sẽ không hoạt động trong môi trường hiện tại (trình duyệt, hệ điều hành, v.v.) lõi jQuery có thể bù đắp? - Chris
Buộc jQuery vào phương trình theo cách này chỉ là vô lý và vô nghĩa, đặc biệt là từ window.location không phải là một phần tử và do đó không có các thuộc tính. - Tim Down
@CoffeeAddict, bình luận 2 năm tuổi, nhưng hãy dạy tôi cách location.href = 'http://stackoverflow.com'; có nhiều chi tiết hơn thay thế trong câu trả lời ở đây không? Ngay cả khi bạn lấy đi các biến nó vẫn còn nhiều chi tiết và nhiều nhân vật hơn để sử dụng jQuery cho việc này. - rlemon
@ deltaray Đây là không phải một cách khác để chuyển hướng, như đã nói ở trên, đó là một wrapper vô nghĩa xung quanh đối tượng vị trí, mà, thậm chí không phải là một phần tử! Điều này làm tôi nhớ đến i.stack.imgur.com/ssRUr.gif - JCM


Cách JavaScript "vanilla" tiêu chuẩn để chuyển hướng một trang:

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


Nếu bạn ở đây vì bạn mất HTTP_REFERER khi chuyển hướng, tiếp tục đọc:


Phần sau dành cho những người sử dụng HTTP_REFERER là một trong nhiều biện pháp an toàn (mặc dù đây không phải là biện pháp bảo vệ tuyệt vời). Nếu bạn đang sử dụng Internet Explorer 8 hoặc thấp hơn, các biến này bị mất khi sử dụng bất kỳ hình thức chuyển hướng trang JavaScript nào (location.href, v.v.).

Dưới đây chúng tôi sẽ thực hiện một thay thế cho IE8 trở xuống để chúng tôi không bị mất HTTP_REFERER. Nếu không, bạn hầu như luôn có thể sử dụng window.location.href.

Thử nghiệm chống lại HTTP_REFERER (Dán URL, phiên, v.v.) có thể hữu ích khi nói liệu yêu cầu có hợp pháp hay không. (Chú thích: cũng có những cách để làm việc xung quanh / giả mạo các liên kết giới thiệu này, như được lưu ý bởi liên kết của droop trong các nhận xét)


Giải pháp kiểm tra trình duyệt chéo đơn giản (dự phòng tới window.location.href cho Internet Explorer 9+ và tất cả các trình duyệt khác)

Sử dụng: 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; 
    }
}

509
2017-07-27 14:41



Lưu ý chân: kiểm tra giới thiệu như một biện pháp an ninh là một giải pháp tệ hại. duckduckgo.com/?q=referrer+spoofing - droope
Nếu bạn có ID phiên HTTP GET trong URL liên kết giới thiệu, nó có thể được sử dụng để kiểm tra xem phiên đó có hợp lệ không. - Andrew Fox
@mcpDESIGNS bạn có chắc chắn rằng bạn đã cố gắng sử dụng location.assign? Tôi sử dụng trong ứng dụng của mình với IE8 và tôi không mất HTTP_REFERER tiêu đề. - Buzinas
Ít nhất là trở lại vào năm 2012 nó không hoạt động, có lẽ các bản vá lỗi sau của IE8 đã sửa nó - đó là điều tốt để nghe! - Mark Pieszak - DevHelp.Online


Sử dụng:

// 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')

349
2018-01-28 04:28



window.navigate chỉ cũ-IE (Firefox / Chrome không hỗ trợ tính năng này). Nếu bạn muốn liệt kê tất cả các tùy chọn, đừng quên document.location. - Rob W
Điều này không giải thích bất cứ điều gì ở tất cả. Người nào đó phải chọn? Chọn một ngẫu nhiên từ danh sách? Ngoài ra, điều này thêm vào câu trả lời hiện có là gì? - Léo Lam
Câu trả lời này là hiện đang được thảo luận tại meta - Bergi
@ LéoLam Đó là lý do tại sao có một công cụ tìm kiếm được gọi là Google. :-) Bạn có thể tìm kiếm từng loại trên Google và tìm sự khác biệt. Bạn không muốn chọn ngẫu nhiên. - I am the Most Stupid Person
@IamtheMostStupidPerson chính xác quan điểm của tôi. Câu trả lời là vô dụng. - Léo Lam


Điều này phù hợp với mọi trình duyệt:

window.location.href = 'your_url';

269
2017-10-22 23:45



Bạn cũng có thể làm document.location.replace(redirectURL) nếu bạn không muốn trang đầu tiên ở trong lịch sử trình duyệt - jazzcat


Nó sẽ giúp ích nếu bạn có một chút mô tả hơn về những gì bạn đang cố gắng làm. Nếu bạn đang cố gắng tạo dữ liệu phân trang, có một số tùy chọn trong cách bạn thực hiện việc này. Bạn có thể tạo các liên kết riêng biệt cho mỗi trang mà bạn muốn có thể truy cập trực tiếp.

<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>
...

Lưu ý rằng trang hiện tại trong ví dụ được xử lý khác nhau trong mã và với CSS.

Nếu bạn muốn dữ liệu phân trang được thay đổi thông qua AJAX, đây là nơi jQuery sẽ đến. Những gì bạn sẽ làm là thêm một trình xử lý nhấn vào mỗi thẻ neo tương ứng với một trang khác. Trình xử lý nhấp chuột này sẽ gọi một số mã jQuery đi và tìm nạp trang tiếp theo qua AJAX và cập nhật bảng với dữ liệu mới. Ví dụ dưới đây giả định rằng bạn có một dịch vụ web trả về dữ liệu trang mới.

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

253
2018-02-02 13:18





tôi cũng nghĩ vậy location.replace(URL) là cách tốt nhất, nhưng nếu bạn muốn thông báo cho các công cụ tìm kiếm về chuyển hướng của bạn (họ không phân tích mã JavaScript để xem chuyển hướng), bạn nên thêm rel="canonical" thẻ meta vào trang web của bạn.

Thêm một phần noscript với một thẻ meta làm mới HTML trong đó, cũng là một giải pháp tốt. Tôi đề nghị bạn sử dụng Công cụ chuyển hướng JavaScript để tạo chuyển hướng. Nó cũng có hỗ trợ Internet Explorer để chuyển qua liên kết giới thiệu HTTP.

Mã mẫu không chậm trễ như sau:

<!-- Place this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

<!-- REDIRECTING STARTS -->
<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 and lower fix to pass the http referer
    {
        document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->

215
2018-04-25 10:12