1.Sử dụng HTTP
Status Code 301 (hoặc 302)
Cách này 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 và kèm theo “Location: some_url” thì trình duyệt sẽ tự động
chuyển đến trang mà bạn chỉ định trong location.
Để làm được thao tác gởi Header
theo ý mình thì tùy vào từng ngôn ngữ lập trình mà nó sẽ cung cấp cho bạn các
cơ chế khác nhau để gởi header nhưng chung quy lại thì công việc cuối cùng là tạo
1 cái HTTP Response có Status code là 301 (hoặc 302).
Tại sao lại là 301 hoặc 302?
Tại sao lại là 301 hoặc 302?
Đối với các ngôn ngữ khác thì
mình chưa kiểm chứng, nhưng đối với PHP, nếu chỉ sử dụng PHP cú pháp gởi header
bằng cách dùng header(“location: some_url”) thì chỉ tạo được header có status
code là 302(Found) chứ không phải 301(Moved Permanently), do đó muốn nhận được
status code 301 ở phía trình duyệt thì bạn cần phải gởi thêm status code trước
khi gởi location. Mình nghĩ các ngôn ngữ lập trình khác cũng tương tự nhỉ ^^!
---------------------------------------------------------------------
PHP Redirect
<?
Header( "HTTP/1.1 301 Moved
Permanently" );
Header( "Location:
http://www.new-url.com" );
?>
----------------------------------------------------------------------
ColdFusion Redirect
<.cfheader
statuscode="301" statustext="Moved permanently">
<.cfheader
name="Location" value="http://www.new-url.com">
-----------------------------------------------------------------------
ASP Redirect
<%@ Language=VBScript %>
<%
Response.Status="301 Moved
Permanently"
Response.AddHeader
"Location","http://www.new-url.com/"
%>
----------------------------------------------------------------------
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.new-url.com");
}
</script>
-----------------------------------------------------------------------
JSP (Java) Redirect
<%
response.setStatus(301);
response.setHeader(
"Location", "http://www.new-url.com/" );
response.setHeader(
"Connection", "close" );
%>
----------------------------------------------------------------------
CGI PERL Redirect
$q = new CGI;
print
$q->redirect("http://www.new-url.com/");
----------------------------------------------------------------------
Ruby on Rails Redirect
def old_action
headers["Status"] =
"301 Moved Permanently"
redirect_to
"http://www.new-url.com/"
end
----------------------------------------------------------------------
Đối với cách sử dụng Header thì sẽ
có 1 cái bất lợi đó là trong trường hợp bạn muốn xuất một nội dung gì đó ra rồi
chuyển trang sẽ không thành công, bởi vì do cơ chế của HTTP, sau khi trình duyệt
nhận được Header status code 301 (hoặc 302) và có location kèm theo thì nó sẽ tự
động chuyển và bỏ qua các nội dung mà bạn xuất. Riêng đối với 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. Còn các
ngôn ngữ khác thì không biết giải quyết được vụ báo lỗi không ^^.
Vì giới hạn của cách thức này, nếu
bạn muốn xuất một nội dung gì ra trong vòng vài giây rồi mới tự động chuyển thì
chỉ có cách sử dụng 2 cách còn lại là sử dụng thẻ META của HTML hoặc sử dụng
Javascript.
2.Sử dụng thẻ META
của HTML
Cách này dùng rất đơn giản và tiện lợi, hiệu quả thì cực kỳ
tốt. Bạn có thể cho phép trang A hiển thị bao lâu đó rồi sau đó sẽ tự động chuyển
sang trang B.Chỉ cần thêm thẻ META dưới đây vào phần HEAD của trang HTML thì sẽ
đạt được hiệu quả.
1
2
3
4
5
6
7
8
|
<html>
<head>
<meta http-equiv="refresh"
content="15;url=http://www.new-url.com/">
</head>
<body>
...
</body>
</html>
|
Trong ví dụ này, website sẽ hiển
thị 15 giây, sau đó sẽ chuyển tới trang http://www.new-url.com/. Bạn có thể
thay đổi thời gian và URl bằng cách thay đổi 2 tham số trong content=”…”.
Giải pháp này được áp dụng phổ biến
bởi tính Usability của nó, tuy nhiên trong 1 số trường hợp bạn không thể sử dụng
thẻ META thì chỉ có cách sử dụng Javasript thông qua hàm setTimeout().
3.Sử dụng cơ chế
Timeout của Javascript
Khi nghĩ tới Javascript có lẽ là lựa chọn cuối cùng của bạn
rồi bởi vì dùng nó sẽ bị tốn “một xíu” tài nguyên trình duyệt và làm cho
webpage chậm “một xíu”. Tuy nhiên, nếu bất khả kháng thì phải dùng thôi.
Dưới đây là 1 ví dụ đơn giản về sử dụng cơ chế Timeout để
chuyển trang, hiệu quả sẽ tương tự như ví dụ ở phần sử dụng thẻ META
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head>
<script type="text/javascript">
<!--
function delayer(){
window.location
= "http://www.new-url.com/"
}
//-->
</script>
</head>
<body onLoad="setTimeout('delayer()',
15000)">
<h2>Prepare to be redirected after 15
second(s)!</h2>
</body>
</html>
|
Tuy nhiên, khi nghĩ tới Javascript là ta có thể triển khai
nhiều điều thú vị cho việc redirect, ví dụ như ngoài việc hiển thị thời gian
chuyển trang, bạn có thể cho số thời gian đếm ngược(mỗi lần trừ 1 giây và hiển
thị số thời gian còn lại ra), như vị ứng dụng chuyển trang trong có vẻ ấn tượng
hơn. Dưới đây là đoạn Javascript cũng làm công việc như ví dụ trên, nhưng kỳ này
thời gian sẽ đếm ngược và hiển thị ra màn hình.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<html>
<head>
<script type="text/javascript">
var time = 15; //How long (in seconds) to countdown
var page = "http://www.new-url.com/"; //The page
to redirect to
function countDown(){
time--;
gett("container").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('container')){
setInterval(countDown, 1000);
gett("container").innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();
</SCRIPT>
</head>
<body>
<h2>Prepare to be redirected after <span
id="container"></span> second(s)!</h2>
</body>
</html>
|
—————————————————
http://bloghoctap.com/web-programming/tu-dong-chuyen-trang-auto-redirect-cho-website.html