OBin's Blog: auto redirect

New

Tự động chuyển trang ( Auto Redirect ) bằng Timeout trong Javascript khá là dễ dàng, bạn còn có thể tạo ra bộ đếm ngược giúp người dùng có cảm giác dễ chịu hơn khi chờ chuyển trang.

Các bạn làm như sau: Đặt đoạn code này trước thẻ </head>

<script type="text/javascript">
var time = 15; // Thời gian đếm ngược
var page = "http://www.redirect-url.com/"; // Trang bạn muốn chuyển đến
function countDown(){
time--;
gett("timecount").innerHTML = time;
if(time == -1){
window.location = page;
}
}
function gett(id){
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init(){
if(gett('timecount')){
setInterval(countDown, 1000);
gett("timecount").innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();
</SCRIPT>

Bạn đặt đoạn code show thời gian đếm ngược này trong body trang :

<h3>Trang sẽ tự chuyển sau <span id="timecount"></span> giây!</h3>

Bạn có thể tùy chỉnh giao diện đếm ngược đẹp hơn.

Các bạn có thể tham khảo thêm những cách tự động chuyển trang ( Auto Redirect ) khác:
- Cách tự động chuyển trang ( Auto Redirect ) bằng HTTP Status Code 301 hoặc 302
- Cách tự động chuyển trang ( Auto Redirect ) bằng thẻ Meta HTML

Xem thêm:
- Cách chạy lệnh Javascript sau khi load trang hoàn tất
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery
- Lấy đường dẫn URL của trang hiện tại bằng PHP
- Hướng dẫn resize ảnh đơn giản bằng PHP
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Trong bài hướng dẫn Cách tự động chuyển trang ( Auto Redirect ) bằng HTTP Status Code 301 hoặc 302 trước chắc bạn đã rõ cách chuyển trang bằng HTTP Status Code 301 hoặc 302. Trong bài này các bạn sử dụng cách đơn giản hơn để Auto Redirect một trang bằng thẻ Meta của HTML.

Đối với cách làm này, bạn có thể cho phép trang A hiển thị trong một thời gian nhất định rồi mới tự động chuyển sang trang B.

Cách làm: Thêm thẻ Meta trước thẻ đóng </head> trong trang HTML như sau:

<html>
<head>
<meta http-equiv="refresh" content="30;url=http://www.redirect-url.com/">
</head>
<body>
...
</body>
</html>

Trong ví dụ trên chúng ta set thời gian hiển thị trước khi redirech sang trang www.redirect-url.com là 30 giây. Bạn set tùy ý bạn khi sử dụng nhé.

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn tự động chuyển trang ( Auto Redirect ) bằng Timeout trong Javascript
- Cách tự động chuyển trang ( Auto Redirect ) bằng HTTP Status Code 301 hoặc 302
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery
- Lấy đường dẫn URL của trang hiện tại bằng PHP
- Hướng dẫn resize ảnh đơn giản bằng PHP
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Tự động chuyển trang bằng HTTP Status Code 301 hoặc 302 là cách tự động chuyển trang (Auto Redirect) đang xem đến một trang khác dựa trên cơ chế của HTTP, nếu trình duyệt nhận được 1 HTTP Response mà HTTP Header có Status code là 301 hoặc 302.

Các cách làm như sau, tùy thuộc vào ngôn ngữ hoặc mã nguồn bạn đang sử dụng:

1 PHP Redirect

<?
 Header( "HTTP/1.1 301 Moved Permanently" );
 Header( "Location: http://www.redirect-url.com" );
 ?>

2 ASP Redirect

<%@ Language=VBScript %>

 <%

 Response.Status="301 Moved Permanently"

 Response.AddHeader "Location","http://www.redirect-url.com/"

 %>

3 ASP .NET Redirect

<script runat="server">

 private void Page_Load(object sender, System.EventArgs e)

 {

 Response.Status = "301 Moved Permanently";

 Response.AddHeader("Location","http://www.redirect-url.com");

 }

 </script>

4 JSP (Java) Redirect

<%

 response.setStatus(301);

 response.setHeader( "Location", "http://www.redirect-url.com/" );

 response.setHeader( "Connection", "close" );

 %>

5 ColdFusion Redirect

<.cfheader statuscode="301" statustext="Moved permanently">

<.cfheader name="Location" value="http://www.redirect-url.com">

6 Ruby on Rails Redirect

def old_action
 headers["Status"] = "301 Moved Permanently"
 redirect_to "http://www.redirect-url.com/"
end

7 CGI PERL Redirect

$q = new CGI;

print $q->redirect("http://www.redirect-url.com/");

Lưu ý: Trong trường hợp bạn muốn xuất một nội dung gì đó ra rồi mới chuyển trang thì cách này sẽ không thành công, vì do cơ chế của HTTP, sau khi trình duyệt nhận được Header status code 301 hoặc 302 với location kèm theo thì nó sẽ tự động chuyển và bỏ qua các nội dung mà bạn muốn xuất. Riêng trong PHP, trước hàm header() mà bạn xuất dù chỉ 1 ký tự thì script sẽ báo lỗi và hàm header() sẽ không được thực hiện, do đó sẽ không xảy ra quá trình tự động chuyển trang.

Chúc các bạn thành công!

Xem thêm:
- Cách tự động chuyển trang ( Auto Redirect ) bằng thẻ Meta HTML
- Hướng dẫn tự động chuyển trang ( Auto Redirect ) bằng Timeout trong Javascript
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery
- Lấy đường dẫn URL của trang hiện tại bằng PHP
- Hướng dẫn resize ảnh đơn giản bằng PHP
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp