Làm cách nào tôi có thể chuyển hướng người dùng từ trang này sang trang khác bằng jQuery hoặc JavaScript thuần?
jQuery 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 so với 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 bị kẹt trong fiasco nút back-end 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";
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 giải pháp tốt nhất, vì nó yêu cầu jQuery. Thay vào đó, hãy thích giải pháp JavaScript thuần túy.
$(location).attr('href', 'http://stackoverflow.com')
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 đang mất HTTP_REFERER khi chuyển hướng, hãy tiếp tục đọc:
Phần sau đây dành cho những người sử dụng HTTP_REFERER
như một trong nhiều biện pháp an toàn (mặc dù đó 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 sẽ 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ẽ triển khai một giải pháp thay thế cho IE8 & thấp hơn để chúng tôi không 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 với HTTP_REFERER
(dán URL, phiên, v.v.) có thể sẽ hữu ích trong việc cho biết liệu một yêu cầu có hợp pháp hay không. ( Lưu ý: cũng có nhiều cách để khắc phục/giả mạo những người giới thiệu này, như được lưu ý bởi liên kết của droop trong các bình luận)
Giải pháp kiểm tra trình duyệt chéo đơn giản (dự phòng cho window.location.href cho Internet Explorer 9+ và tất cả các trình duyệt khác)
Cách 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;
}
}
Có rất nhiều cách để làm điều này.
// 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')
Điều này hoạt động cho mọi trình duyệt:
window.location.href = 'your_url';
Nó sẽ giúp nếu bạn mô tả nhiều hơn một chút 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 cho từng 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 thay đổi dữ liệu phân trang thông qua AJAX, đây là nơi jQuery sẽ đến. Điều bạn sẽ làm là thêm một trình xử lý nhấp chuột vào mỗi thẻ neo tương ứng với một trang khác nhau. 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 thông 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
});
});
Tôi cũng nghĩ rằng 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 thẻ meta rel="canonical"
vào trang web của mình.
Thêm một phần noscript với thẻ meta làm mới HTML trong đó, cũng là một giải pháp tốt. Tôi khuyên bạn nên sử dụng công cụ chuyển hướng JavaScript này để tạo chuyển hướng. Nó cũng có hỗ trợ Internet Explorer để vượt qua người giới thiệu HTTP.
Mã mẫu không chậm trễ trông như thế này:
<!-- 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 -->
Nhưng nếu ai đó muốn chuyển hướng trở lại trang chủ thì anh ta có thể sử dụng đoạn mã sau.
window.location = window.location.Host
Sẽ rất hữu ích nếu bạn có ba môi trường khác nhau là phát triển, dàn dựng và sản xuất.
Bạn có thể khám phá cửa sổ này hoặc đối tượng window.location bằng cách chỉ cần đặt những từ này vào Bảng điều khiển Chrome hoặc Bảng điều khiển Firebird '.
JavaScript cung cấp cho bạn nhiều phương thức để truy xuất và thay đổi URL hiện tại được hiển thị trên thanh địa chỉ của trình duyệt. Tất cả các phương thức này sử dụng đối tượng Location, là một thuộc tính của đối tượng Window. Bạn có thể tạo một đối tượng Vị trí mới có URL hiện tại như sau ..
var currentLocation = window.location;
Cấu trúc cơ bản của URL
<protocol>//<hostname>:<port>/<pathname><search><hash>
Giao thức - Chỉ định tên giao thức được sử dụng để truy cập tài nguyên trên Internet. (HTTP (không có SSL) hoặc HTTPS (có SSL))
tên máy chủ - Tên máy chủ chỉ định Máy chủ sở hữu tài nguyên. Ví dụ: www.stackoverflow.com. Một máy chủ cung cấp dịch vụ sử dụng tên của Máy chủ lưu trữ.
cổng - Số cổng được sử dụng để nhận biết một quy trình cụ thể mà Internet hoặc tin nhắn mạng khác sẽ được chuyển tiếp khi đến máy chủ.
tên đường dẫn - Đường dẫn cung cấp thông tin về tài nguyên cụ thể trong Máy chủ mà máy khách Web muốn truy cập. Ví dụ: stackoverflow.com/index.html.
truy vấn - Chuỗi truy vấn theo thành phần đường dẫn và cung cấp một chuỗi thông tin mà tài nguyên có thể sử dụng cho mục đích nào đó (ví dụ: làm tham số cho tìm kiếm hoặc dưới dạng dữ liệu cần xử lý).
hàm băm - Phần neo của URL, bao gồm dấu băm (#).
Với các thuộc tính đối tượng Vị trí này, bạn có thể truy cập tất cả các thành phần URL này
Bây giờ Nếu bạn muốn thay đổi một trang hoặc chuyển hướng người dùng sang một trang khác, bạn có thể sử dụng thuộc tính href
của đối tượng Vị trí như thế này
Bạn có thể sử dụng thuộc tính href của đối tượng Location.
window.location.href = "http://www.stackoverflow.com";
Đối tượng vị trí cũng có ba phương thức này
Bạn có thể sử dụng phương thức gán () và thay thế cũng để chuyển hướng đến các trang khác như thế này
location.assign("http://www.stackoverflow.com");
location.replace("http://www.stackoverflow.com");
Cách gán () và thay thế () khác nhau - Sự khác biệt giữa phương thức thay thế () và phương thức gán () () là thay thế () loại bỏ URL của hiện tại tài liệu từ lịch sử tài liệu, có nghĩa là không thể sử dụng nút "quay lại" để điều hướng trở lại tài liệu gốc. Vì vậy, sử dụng phương thức gán () nếu bạn muốn tải một tài liệu mới và muốn cung cấp tùy chọn điều hướng trở lại tài liệu gốc.
Bạn có thể thay đổi thuộc tính object href bằng cách sử dụng jQuery cũng như thế này
$(location).attr('href',url);
Và do đó bạn có thể chuyển hướng người dùng đến một số url khác.
Về cơ bản jQuery chỉ là JavaScript framework và để thực hiện một số điều như chuyển hướng trong trường hợp này, bạn chỉ có thể sử dụng JavaScript thuần túy, vì vậy trong trường hợp đó bạn có 3 tùy chọn sử dụng Vanilla JavaScript:
1) Sử dụng vị trí thay thế , điều này sẽ thay thế lịch sử hiện tại của trang, có nghĩa là không thể sử dụng nút back để quay lại trang gốc.
window.location.replace("http://stackoverflow.com");
2) Sử dụng vị trí gán , điều này sẽ giữ lịch sử cho bạn và bằng cách sử dụng nút quay lại, bạn có thể quay lại trang gốc:
window.location.assign("http://stackoverflow.com");
3) Tôi khuyên bạn nên sử dụng một trong những cách trước đó, nhưng đây có thể là tùy chọn thứ ba sử dụng JavaScript thuần túy:
window.location.href="http://stackoverflow.com";
Bạn cũng có thể viết một hàm trong jQuery để xử lý nó, nhưng không được khuyến nghị vì đó chỉ là một hàm JavaScript thuần túy, bạn cũng có thể sử dụng tất cả các hàm trên mà không có cửa sổ nếu bạn đã ở trong phạm vi cửa sổ, ví dụ window.location.replace("http://stackoverflow.com");
có thể là location.replace("http://stackoverflow.com");
Ngoài ra tôi hiển thị tất cả trên hình ảnh dưới đây:
Chỉ có thể đặt bằng cách sử dụng window.location
.
Ví dụ:
window.location = "https://stackoverflow.com/";
Đây là một bài viết quá khứ về chủ đề:
Trước khi tôi bắt đầu, jQuery là một thư viện JavaScript được sử dụng để thao tác DOM. Vì vậy, bạn không nên sử dụng jQuery để chuyển hướng trang.
Một trích dẫn từ Jquery.com:
Mặc dù jQuery có thể chạy mà không gặp sự cố lớn trong các phiên bản trình duyệt cũ hơn, chúng tôi không chủ động kiểm tra jQuery trong đó và thường không sửa các lỗi có thể xuất hiện trong chúng.
Nó được tìm thấy ở đây: https://jquery.com/browser-support/
Vì vậy, jQuery không phải là một giải pháp cuối cùng và tất cả để tương thích ngược.
Giải pháp sau đây sử dụng JavaScript thô hoạt động trong tất cả các trình duyệt và đã được chuẩn trong một thời gian dài, do đó bạn không cần bất kỳ thư viện nào để hỗ trợ trình duyệt chéo.
Trang này sẽ chuyển hướng đếnGooglesau 3000 mili giây
<!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>
Các tùy chọn khác nhau như sau:
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"
Khi sử dụng thay thế, nút quay lại sẽ không quay lại trang chuyển hướng, như thể nó chưa từng có trong lịch sử. Nếu bạn muốn người dùng có thể quay lại trang chuyển hướng thì hãy sử dụng window.location.href
hoặc window.location.assign
. Nếu bạn sử dụng một tùy chọn cho phép người dùng quay lại trang chuyển hướng, hãy nhớ rằng khi bạn vào trang chuyển hướng, nó sẽ chuyển hướng bạn quay lại. Vì vậy, hãy cân nhắc điều đó khi chọn một tùy chọn cho chuyển hướng của bạn. Trong điều kiện trang chỉ chuyển hướng khi người dùng thực hiện một hành động thì việc có trang trong lịch sử nút quay lại sẽ ổn. Nhưng nếu trang tự động chuyển hướng thì bạn nên sử dụng thay thế để người dùng có thể sử dụng nút quay lại mà không bị buộc quay lại trang mà chuyển hướng gửi.
Bạn cũng có thể sử dụng dữ liệu meta để chạy chuyển hướng trang như sau.
Làm mới META
<meta http-equiv="refresh" content="0;url=http://evil.com/" />
Vị trí META
<meta http-equiv="location" content="URL=http://evil.com" />
Cướp bóc
<base href="http://evil.com/" />
Nhiều phương pháp khác để chuyển hướng khách hàng không nghi ngờ của bạn đến một trang mà họ có thể không muốn đi có thể được tìm thấy trên trang này (không phải một trong số họ phụ thuộc vào jQuery):
https://code.google.com.vn/p/html5security/wiki/RedirectionMethods
Tôi cũng muốn chỉ ra rằng, mọi người không muốn được chuyển hướng ngẫu nhiên. Chỉ chuyển hướng mọi người khi thực sự cần thiết. Nếu bạn bắt đầu chuyển hướng mọi người một cách ngẫu nhiên, họ sẽ không bao giờ truy cập trang web của bạn nữa.
Phần tiếp theo là giả thuyết:
Bạn cũng có thể được báo cáo là một trang web độc hại. Nếu điều đó xảy ra thì khi mọi người nhấp vào liên kết đến trang web của bạn, trình duyệt người dùng có thể cảnh báo họ rằng trang web của bạn là độc hại. Điều cũng có thể xảy ra là các công cụ tìm kiếm có thể bắt đầu giảm xếp hạng của bạn nếu mọi người báo cáo trải nghiệm xấu trên trang web của bạn.
Vui lòng xem lại Nguyên tắc quản trị trang web của Google về các chuyển hướng: https://support.google.com/webmasters khối/2851217? Hl = vi & ref_topic = 6001971
Đây là một trang nhỏ thú vị đuổi bạn ra khỏi trang.
<!DOCTYPE html>
<html>
<head>
<title>Go Away</title>
</head>
<body>
<h1>Go Away</h1>
<script>
setTimeout(function(){
window.history.back();
}, 3000);
</script>
</body>
</html>
Nếu bạn kết hợp hai ví dụ trang với nhau, bạn sẽ có một vòng lặp định tuyến lại sẽ đảm bảo rằng người dùng của bạn sẽ không bao giờ muốn sử dụng trang web của bạn nữa.
var url = 'asdf.html';
window.location.href = url;
Bạn có thể làm điều đó mà không cần jQuery như:
window.location = "http://yourdomain.com";
Và nếu bạn chỉ muốn jQuery thì bạn có thể làm như sau:
$jq(window).attr("location","http://yourdomain.com");
Điều này hoạt động với jQuery:
$(window).attr("location", "http://google.fr");
# Chuyển hướng trang HTML bằng jQuery/JavaScript
Hãy thử mã ví dụ này:
function YourJavaScriptFunction()
{
var i = $('#login').val();
if (i == 'login')
window.location = "login.php";
else
window.location = "Logout.php";
}
Nếu bạn muốn cung cấp một URL hoàn chỉnh dưới dạngwindow.location = "www.google.co.in";
.
Bạn cần đặt dòng này trong mã của bạn:
$(location).attr("href","http://stackoverflow.com");
Nếu bạn không có jQuery, hãy sử dụng JavaScript:
window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");
Vì vậy, câu hỏi là làm thế nào để tạo một trang chuyển hướng, chứ không phải làm thế nào để chuyển hướng đến một trang web?
Bạn chỉ cần sử dụng JavaScript cho việc này. Đây là một số mã nhỏ sẽ tạo ra một trang chuyển hướng động.
<script>
var url = window.location.search.split('url=')[1]; // Get the URL after ?url=
if( url ) window.location.replace(url);
</script>
Vì vậy, giả sử bạn chỉ cần đặt đoạn mã này vào tệp redirect/index.html
trên trang web của mình, bạn có thể sử dụng nó như vậy.
http://www.mywebsite.com/redirect?url=http://stackoverflow.com
Và nếu bạn đi đến liên kết đó, nó sẽ tự động chuyển hướng bạn đến stackoverflow.com .
Và đó là cách bạn tạo một trang chuyển hướng Đơn giản bằng JavaScript
Chỉnh sửa:
Cũng có một điều cần lưu ý. Tôi đã thêm window.location.replace
trong mã của mình vì tôi nghĩ rằng nó phù hợp với trang chuyển hướng, nhưng, bạn phải biết rằng khi sử dụng window.location.replace
và bạn được chuyển hướng, khi bạn nhấn nút quay lại trong trình duyệt, nó sẽ không quay lại đến trang chuyển hướng, và nó sẽ quay trở lại trang trước nó, hãy xem điều demo nhỏ này.
Thí dụ:
Quá trình: lưu trữ nhà => chuyển hướng trang đến google => google
Khi ở google: google => nút quay lại trong trình duyệt => lưu trữ nhà
Vì vậy, nếu điều này phù hợp với nhu cầu của bạn thì mọi thứ sẽ ổn. Nếu bạn muốn bao gồm trang chuyển hướng trong lịch sử trình duyệt, hãy thay thế
if( url ) window.location.replace(url);
với
if( url ) window.location.href = url;
Trên chức năng nhấp chuột của bạn, chỉ cần thêm:
window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
window.location.href = "http://www.google.com";
});
***** CÂU HỎI NGUỒN GỐC - "CÁCH GIẢM GIÁ SỬ DỤNG YÊU CẦU", HỎI ĐÁP ÁN TRẢ LỜI ĐÁP ÁN >> TRƯỜNG HỢP SỬ DỤNG HOÀN TOÀN *****
Để chỉ chuyển hướng đến một trang bằng JavaScript:
window.location.href = "/contact/";
Hoặc nếu bạn cần một sự chậm trễ:
setTimeout(function () {
window.location.href = "/contact/";
}, 2000); // Time in milliseconds
jQuery cho phép bạn chọn các thành phần từ một trang web một cách dễ dàng. Bạn có thể tìm thấy bất cứ điều gì bạn muốn trên một trang và sau đó sử dụng jQuery để thêm các hiệu ứng đặc biệt, phản ứng với các hành động của người dùng hoặc hiển thị và ẩn nội dung bên trong hoặc bên ngoài phần tử bạn đã chọn. Tất cả các tác vụ này bắt đầu bằng việc biết cách chọn một yếu tố hoặc sự kiện .
$('a,img').on('click',function(e){
e.preventDefault();
$(this).animate({
opacity: 0 //Put some CSS animation here
}, 500);
setTimeout(function(){
// OK, finished jQuery staff, let's go redirect
window.location.href = "/contact/";
},500);
});
Hãy tưởng tượng ai đó đã viết một tập lệnh/plugin có 10000 dòng mã?! Chà, với jQuery bạn có thể kết nối với mã này chỉ bằng một hoặc hai dòng.
jQuery không cần thiết. Bạn có thể làm được việc này:
window.open("URL","_self","","")
Thật dễ dàng!
Cách tốt nhất để bắt đầu một yêu cầu HTTP là với document.loacation.href.replace('URL')
.
Đầu tiên viết đúng. Bạn muốn điều hướng trong một ứng dụng cho một liên kết khác từ ứng dụng của bạn cho một liên kết khác. Đây là mã:
window.location.href = "http://www.google.com";
Và nếu bạn muốn điều hướng các trang trong ứng dụng của mình thì tôi cũng có mã, nếu bạn muốn.
Bạn có thể chuyển hướng trong jQuery như thế này:
$(location).attr('href', 'http://yourPage.com/');
Trong JavaScript và jQuery, chúng ta có thể sử dụng đoạn mã sau để chuyển hướng một trang sang trang khác:
window.location.href="http://google.com";
window.location.replace("page1.html");
Javascript:
window.location.href='www.your_url.com';
window.top.location.href='www.your_url.com';
window.location.replace('www.your_url.com');
Câu hỏi:
var url='www.your_url.com';
$(location).attr('href',url);
$(location).prop('href',url);//instead of location you can use window
$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")
Xin đừng giết tôi, đây là một trò đùa. Đó là một trò đùa. Đây là một trò đùa.
Điều này đã "cung cấp một câu trả lời cho câu hỏi", theo nghĩa là nó đã yêu cầu một giải pháp "sử dụng jQuery", trong trường hợp này đòi hỏi phải buộc nó vào phương trình bằng cách nào đó.
Ferrybig rõ ràng cần giải thích về trò đùa (vẫn nói đùa, tôi chắc chắn có các tùy chọn hạn chế trong mẫu đánh giá), vì vậy không cần phải đắn đo thêm:
Các câu trả lời khác đang sử dụng attr()
của jQuery trên các đối tượng location
hoặc window
không cần thiết.
Câu trả lời này cũng lạm dụng nó, nhưng theo một cách vô lý hơn. Thay vì sử dụng nó để đặt vị trí, điều này sử dụng attr()
để lấy một chức năng đặt vị trí.
Hàm được đặt tên là jQueryCode
mặc dù không có gì về jQuery và việc gọi hàm somethingCode
thật kinh khủng, đặc biệt là khi thứ gì đó thậm chí không phải là ngôn ngữ.
"85 byte" là một tham chiếu đến Code Golf. Chơi golf rõ ràng không phải là điều bạn nên làm ngoài môn đánh gôn, và hơn nữa câu trả lời này rõ ràng là không thực sự chơi gôn.
Về cơ bản, co rúm.
Đây là một chuyển hướng trì hoãn thời gian. Bạn có thể đặt thời gian trễ thành bất cứ điều gì bạn muốn:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Document Title</title>
<script type="text/javascript">
function delayer(delay) {
onLoad = setTimeout('window.location.href = "http://www.google.com/"', delay);
}
</script>
</head>
<body>
<script>
delayer(8000)
</script>
<div>You will be redirected in 8 seconds!</div>
</body>
</html>
Có ba cách chính để làm điều này,
window.location.href='blaah.com';
window.location.assign('blaah.com');
và ...
window.location.replace('blaah.com');
Cái cuối cùng là tốt nhất, cho một chuyển hướng truyền thống, bởi vì nó sẽ không lưu trang bạn đã truy cập trước khi được chuyển hướng trong lịch sử tìm kiếm của bạn. Tuy nhiên, nếu bạn chỉ muốn mở một tab bằng JavaScript, bạn có thể sử dụng bất kỳ cách nào ở trên. 1
EDIT: Tiền tố window
là tùy chọn.
Tôi vừa phải cập nhật sự lố bịch này với một phương thức jQuery mới hơn:
var url = 'http://www.fiftywaystoleaveyourlocation.com';
$(location).prop('href', url);
Viết mã dưới đây sau phần PHP, HTML hoặc jQuery. Nếu ở giữa phần PHP hoặc HTML, thì hãy sử dụng thẻ <script>.
location.href = "http://google.com"
Cách thứ nhất
Đây là mã jQuery để chuyển hướng một trang. Vì, tôi đã đặt mã này vào hàm $ (document). Yet (), nó sẽ thực thi ngay khi trang được tải.
var url = "http://stackoverflow.com";
$(location).attr('href',url);
Bạn thậm chí có thể truyền URL trực tiếp đến phương thức attr () , thay vì sử dụng biến.
Cách thứ hai
window.location.href="http://stackoverflow.com";
Bạn cũng có thể mã như thế này (cả hai đều giống nhau trong nội bộ):
window.location="http://stackoverflow.com";
Nếu bạn tò mò về sự khác biệt giữa window.location và window.location.href
, thì bạn có thể thấy rằng cái sau đang đặt thuộc tính href
một cách rõ ràng, trong khi cái trước thì nó hoàn toàn ẩn. Vì window.location
trả về một đối tượng, theo mặc định, nó đặt thuộc tính .href
của nó.
Cách thứ ba
Có một cách khác để chuyển hướng một trang bằng JavaScript, đó là phương thức replace()
của đối tượng window.location
. Bạn có thể chuyển một URL mới cho phương thức replace()
và nó sẽ mô phỏng chuyển hướng HTTP. Nhân tiện, hãy nhớ rằng phương thức window.location.replace()
không đưa trang gốc vào lịch sử phiên, điều này có thể ảnh hưởng đến hành vi của nút quay lại. Đôi khi, đó là những gì bạn muốn, vì vậy hãy sử dụng nó một cách cẩn thận.
// Doesn't put originating page in history
window.location.replace("http://stackoverflow.com");
Cách thứ tư
like attr () method (sau khi jQuery 1.6 giới thiệu)
var url = "http://stackoverflow.com";
$(location).prop('href', url);
Trong jQuery , sử dụng $(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>
Trong raw JavaScript , có một số cách để đạt được điều đó:
window.location.href="https://www.youtube.com/watch?v=JwMKRevYa_M";
- thiết lập thuộc tính rõ ràng.
window.location = "http://www.GameOfThrones.com";
- thực hiện nó hoàn toàn Vì window.location trả về một đối tượng, theo mặc định sẽ đặt thuộc tính .href của nó.
window.location.replace("http://www.stackoverflow.com");
- thay thế vị trí của cửa sổ hiện tại bằng cửa sổ mới.
self.location = "http://www.somewebsite.com";
- thiết lập vị trí của cửa sổ hiện tại.
Dưới đây là một ví dụ về chuyển hướng JavaScript sau một thời gian nhất định (3 giây):
<script>
setTimeout(function() {
window.location.href = "https://www.youtube.com/";
}, 3000);
</script>
window.location.href="http://google.com";
window.location.replace("http://google.com");
$(location).attr('href', 'http://google.com');
jQuery.fn.redirectTo = function(url){
window.location.href = url;
}
jQuery(window).redirectTo("http://google.com");
Trong JavaScript và jQuery, chúng tôi sử dụng mã sau đây để chuyển hướng trang:
window.location.href="http://google.com";
window.location.replace("page1.html");
Nhưng bạn có thể tạo một hàm trong jQuery để chuyển hướng trang:
jQuery.fn.redirect=function(url)
{
window.location.href=url;
}
Và gọi chức năng này:
jQuery(window).redirect("http://stackoverflow.com/")
Sử dụng hàm jQuery:
$.extend({
redirectPost: function(location, args) {
var form = '';
$.each(args, function(key, value) {
form += '<input type="hidden" name="' + key + '" value="' + value + '">';
});
$('<form action="' + location + '" method="POST">' + form + '</form>').appendTo($(document.body)).submit();
}
});
Trong mã của bạn, bạn sử dụng nó như thế này:
$.redirectPost("addPhotos.php", {pimreference: $("#pimreference").val(), tag: $("#tag").val()});
Đơn giản là trong JavaScript, bạn có thể chuyển hướng đến một trang cụ thể bằng cách sử dụng như sau:
window.location.replace("http://www.test.com");
Hoặc là
location.replace("http://www.test.com");
Hoặc là
window.location.href = "http://www.test.com";
Sử dụng jQuery:
$(window).attr("location","http://www.test.com");
<script type="text/javascript">
var url = "https://yourdomain.com";
// IE8 and lower fix
if (navigator.userAgent.match(/MSIE\s(?!9.0)/))
{
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
}
// All other browsers
else { window.location.replace(url); }
</script>
Javascript rất rộng. Nếu bạn muốn chuyển sang một trang khác, bạn có ba tùy chọn.
window.location.href='otherpage.com';
window.location.assign('otherpage.com');
//and...
window.location.replace('otherpage.com');
Khi bạn muốn chuyển sang trang khác, bạn có thể sử dụng bất kỳ từ những trang này nếu đây là yêu cầu của bạn Tuy nhiên cả ba tùy chọn đều bị giới hạn trong các tình huống khác nhau. Lựa chọn khôn ngoan theo yêu cầu của bạn.
nếu bạn quan tâm đến nhiều kiến thức hơn về khái niệm này. Bạn có thể đi qua hơn nữa.
window.location.href; returns the href (URL) of the current page
window.location.hostname; returns the domain name of the web Host
window.location.pathname; returns the path and filename of the current page
window.location.protocol; returns the web protocol used (http: or https:)
window.location.assign; loads a new document
Đây là mã để chuyển hướng đến một số trang khác với thời gian chờ là 10 giây.
<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>
Bạn cũng có thể làm như thế này, khi nhấp vào nút bằng location.assign:
<input type="button" value="Load new document" onclick="newPage()">
<script>
function newPage() {
window.location.assign("http://www.adarshkr.com")
}
</script>
Bạn có thể sử dụng nó như trong đoạn mã sau trong đó getRequestToForwardPage
là ánh xạ yêu cầu ( URL ). Bạn cũng có thể sử dụng URL của bạn.
function savePopUp(){
$.blockUI();
$.ajax({
url:"saveGuestHouse?roomType="+$("#roomType").val(),
data: $("#popForm").serialize(),
dataType: "json",
error: (function() {
alert("Server Error");
$.unblockUI();
}),
success: function(map) {
$("#layer1").hide();
$.unblockUI();
window.location = "getRequestToForwardPage";
}
});
Điều này là cho cùng một bối cảnh của ứng dụng.
Nếu bạn muốn chỉ sử dụng mã cụ thể jquery thì mã sau đây có thể giúp:
$(location).attr('href',"http://www.google.com");
$jq(window).attr("location","http://www.google.com");
$(location).prop('href',"http://www.google.com");
<script type="text/javascript">
if(window.location.href === "http://stackoverflow.com") {
window.location.replace("https://www.google.co.in/");
}
</script>
Bạn có thể chuyển hướng trang bằng cách sử dụng các phương pháp dưới đây:
Bằng cách sử dụng thẻ meta trong đầu - <meta http-equiv="refresh" content="0;url=http://your-page-url.com" />
. Lưu ý rằng content="0;
... được sử dụng sau bao nhiêu giây bạn cần chuyển hướng trang
Bằng cách sử dụng JavaScript: window.location.href = "http://your-page-url.com";
Bằng cách sử dụng jQuery: $(location).attr('href', 'http://yourPage.com/');
Bạn có thể dùng:
window.location.replace("http://www.example.com/");
Phương thức replace()
không lưu trang gốc trong lịch sử phiên, do đó người dùng không thể quay lại bằng nút quay lại và lại được chuyển hướng. LƯU Ý: Nút quay lại của trình duyệt sẽ bị vô hiệu hóa trong trường hợp này.
Tuy nhiên, nếu bạn muốn có hiệu ứng giống như nhấp vào liên kết bạn nên truy cập:
window.location.href = "http://www.example.com/";
Trong trường hợp này, nút quay lại của trình duyệt sẽ hoạt động.
Sử dụng:
function redirect(a) {
location = a
}
Và gọi nó bằng: redirect([url]);
Không cần href
sau location
, vì nó được ngụ ý.
Bạn có thể viết Url.Action cho sự kiện Nhấp vào nút trong phần tập lệnh như sau.
function onclick() {
location.href = '@Url.Action("Index","Home")';
}
Ứng dụng Trang đơn , trong cùng một tuyến ứng dụng
window.location.pathname = '/stack';
JavaScript:
location.href = "http://stack.com";
window.location = "http://stack.com";
jQuery:
$(location).attr('href', "http://www.stack.com");
$(window).attr('location', "http://www.stack.com");
Angular 4
import { Router } from '@angular/router';
export class NavtabComponent{
constructor(private router: Router) {
}
this.router.navigate(['bookings/taxi']);
}
Tôi chỉ cần thêm một cách khác:
Để chuyển hướng cho bất kỳ trang/liên kết cụ thể nào của trang web của bạn sang một trang khác, chỉ cần thêm dòng mã này:
<script>
if(window.location.href == 'old_url')
{
window.location.href="new_url";
}
// Another URL redirect
if(window.location.href == 'old_url2')
{
window.location.href="new_url2";
}
</script>
Ví dụ trong cuộc sống thực,
<script>
if(window.location.href == 'https://old-site.com')
{
window.location.href="https://new-site.com";
}
// Another URL redirect
if(window.location.href == 'https://old-site.com/simple-post.html')
{
window.location.href="https://new-site.com/simple-post.html";
}
</script>
Bằng cách sử dụng mã đơn giản này, bạn có thể chuyển hướng toàn bộ trang web hoặc bất kỳ trang nào.
Điều này rất dễ thực hiện. Bạn có thể dùng:
window.location.href = "http://www.example.com/";
Điều này sẽ ghi nhớ lịch sử của trang trước. Vì vậy, người ta có thể quay lại bằng cách nhấp vào nút quay lại của trình duyệt.
Hoặc là:
window.location.replace("http://www.example.com/");
Phương pháp này không nhớ lịch sử của trang trước. Nút quay lại bị vô hiệu hóa trong trường hợp này.
Nếu bạn thích sử dụng javascript thuần túy, tôi nhận ra rằng việc sử dụng document.location.href = "https://example.com"
hoặc window.location.href = "https://example.com"
gây ra sự cố tương thích trong Firefox. Thay vào đó hãy thử sử dụng:
location.href = "https://example.com";
location.replace("http://example.com");
Trong trường hợp của tôi đã giải quyết vấn đề. Chúc may mắn!
Tôi đã sử dụng hàm redirect () của JavaScript. Nó đang hoạt động.
<script type="text/javascript">
$(function () {
//It's similar to HTTP redirect
window.location.replace("http://www.Technomark.in");
//It's similar to clicking on a link
window.location.href = "Http://www.Technomark.in";
})
</script>
location.assign ():
Để chỉ định đường dẫn tuyến đường bằng cách chuyển một đường dẫn vào đó .. Gán sẽ cung cấp cho bạn một lịch sử ngay cả sau khi đường dẫn được gán.
Phương thức sử dụng: value nên được truyền vào nó.
Ví dụ: location.assign("http://google.com")
vị trí.href
Có thể xác định cung cấp một đường dẫn vào đó ... Và nó sẽ chuyển hướng vào một đường dẫn cụ thể sau khi thiết lập và nó sẽ giữ lịch sử ...
Phương thức sử dụng: value nên được gán vào nó.
Ví dụ: location.href = "http://google.com"
location.replace ():
Nó sẽ giúp thay thế một con đường nếu bạn không muốn giữ lịch sử. Nó sẽ không cung cấp cho bạn một lịch sử một khi bạn thay thế con đường của nó.
Phương thức sử dụng: value nên được truyền vào nó.
Ví dụ: location.replace("http://google.com")
assign()
và href
tương tự nhau và cả hai đều có thể chứa lịch sử. assign
sẽ hoạt động bằng cách chuyển một giá trị và href hoạt động bằng cách gán.
Bạn có thể đạt được nó bằng cách sử dụng JavaScript mà không cần sử dụng jQuery bằng cách gán,
window.location = "http://google.com"
location.href = "http://google.com"
Bạn có thể đạt được điều tương tự bằng cách sử dụng jQuery như dưới đây. Nó sẽ làm chính xác như trên,
$(window).attr('location', "http://www.google.com");
$(location).attr('href', "http://www.google.com");
Bạn có thể dễ dàng hiểu được sự khác biệt giữa cả hai ...
Đây là đối tượng Location,
Nếu bạn muốn chuyển hướng đến một tuyến đường trong cùng một ứng dụng
window.location.pathname = '/examplepath'
sẽ là con đường để đi.
Sử dụng location.replace()
sẽ chuyển hướng bạn nhưng không lưu lịch sử của trang trước. Điều này tốt hơn để sử dụng khi một hình thức được gửi. Nhưng khi bạn muốn giữ lịch sử của mình, bạn phải sử dụng location.href=//path
Ví dụ:
// form with steps
document.getElementById('#next').onclick = function() {
window.location.href='/step2' // iteration of steps;
}
// go to next step
document.getElementById("#back').onclick = function() {
window.history.back();
}
// finish
document.getElementById("#finish').onclick = function() {
window.location.href = '/success';
}
// on success page
window.onload = function() {
setTimeout(function() {
window.location.replace('/home'); // i can't go back to success page by pressing the back button
},3000);
}
Tất cả các cách để thực hiện chuyển hướng từ phía khách hàng:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and jQuery example to redirect a page or URL </title>
</head>
<body>
<div id="redirect">
<h2>Redirecting to another page</h2>
</div>
<script src="scripts/jquery-1.6.2.min.js"></script>
<script>
// JavaScript code to redirect a URL
window.location.replace("http://stackoverflow.com");
// window.location.replace('http://code.shouttoday.com');
// Another way to redirect page using JavaScript
// window.location.assign('http://code.shouttoday.com');
// window.location.href = 'http://code.shouttoday.com';
// document.location.href = '/relativePath';
//jQuery code to redirect a page or URL
$(document).ready(function(){
//var url = "http://code.shouttoday.com";
//$(location).attr('href',url);
// $(window).attr('location',url)
//$(location).prop('href', url)
});
</script>
</body>
</html>
Chuyển hướng người dùng bằng jQuery/JavaScript
Bằng cách sử dụng đối tượng vị trí trong jQuery hoặc JavaScript, chúng tôi có thể chuyển hướng người dùng đến một trang web khác.
Trong jQuery
Mã để chuyển hướng người dùng từ trang này sang trang khác là:
var url = 'http://www.example.com';
$(location).attr('href', url);
Trong JavaScript
Mã để chuyển hướng người dùng từ trang này sang trang khác là:
var url = 'http://www.example.com';
window.location.href = url;
Hoặc là
var url = 'http://www.example.com';
window.location = url;
Đây là cách tôi sử dụng nó.
window.location.replace('yourPage.aspx');
// If you're on root and redirection page is also on the root
window.location.replace(window.location.Host + '/subDirectory/yourPage.aspx');
// If you're in sub directory and redirection page is also in some other sub directory.
Theo kinh nghiệm làm việc của tôi, JavaScript tốt hơn nhiều để chuyển hướng.
Nó phụ thuộc vào cách bạn muốn thay đổi vị trí. Nếu bạn muốn đăng nhập trang web của mình trong lịch sử người dùng, hãy sử dụng window.location.href='ur website';
. Nếu không, để làm điều đó mà không đăng nhập vào lịch sử, hãy sử dụng window.location.replace("your website");
.