Trang chủ
Tối qua về hì hục code, cuối cùng cũng fix được button back, nhưng tạm thời chỉ dùng cho IE, tôi đã thử trên FF nhưng do kinh nghiệm về nó còn ít (3 tuần)
nên không đạt được kết quả.
Sau đây là phần demo cho IE:
Đầu tiên mọi người tạo 5 file php để giả lập cho các trường hợp truy vấn MySQL
php1.php:
<? php
echo "Trang thứ nhất";
?>
php2.php:
<? php
echo "Trang thứ hai";
?>
php3.php:
<? php
echo "Trang thứ ba";
?>
php4.php:
<? php
echo "Trang thứ tư";
?>
php5.php:
<? php
echo "Trang thứ năm";
?>
Còn đây là code cho trang chủ :
<?
<html><head><title>Fix Back</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
a:link {
width: 100%; color: blue; text-decoration: none
}
a:visited {
width: 100%; color: blue; text-decoration: none
}
a:hover {
width: 100%; color: red; text-decoration: none
}
</style>
</head>
<body>
<table id="ddwww" cellpadding=10 cellspacing=5 style="border-collapse: collapse" width=100% height=100% border=1 >
<tr>
<td width="201px" align="left" bgcolor="#abcabc" valign="top">
<a href="javascript:mAjax('php1.php')">Một</a><br>
<a href="javascript:mAjax('php2.php')">Hai</a><br>
<a href="javascript:mAjax('php3.php')">Ba</a><br>
<a href="javascript:mAjax('php4.php')">Bốn</a><br>
<a href="javascript:mAjax('php5.php')">Năm</a><br>
</td>
<td id="hienthi" align="center" valign="middle">
hic
</td>
</tr>
</table>
<iframe name="amehistory" style="width: 0xp; height: 0px; display: none" width=0 height=0 border=0 ></iframe>
</body>
<script type="text/javascript" >
function mioXmlHttpRequestObject()
{
var xmlHttp;
if(window.ActiveXObject){
try{xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}
catch (e){xmlHttp = false;}
}
else{
try{xmlHttp = new XMLHttpRequest();}
catch (e){xmlHttp = false;}
}
if (!xmlHttp)alert("Có lỗi trong quá trình tạo đối tượng : XMLHttpRequest .");
else return xmlHttp;
}
var xmlHttp = mioXmlHttpRequestObject();
function mAjax(bv)
{
var html =' <html>n';
html +=' <scr'+'ipt>n';
html +=' var memo="'+bv+'";n';
html +=' parent.mKetNoi(memo);n';
html +=' </scr'+'ipt>n';
html +=' </html>n';
amehistory.document.open();
amehistory.document.write(html);
amehistory.document.close();
}
var lienket="";
function mKetNoi(link)
{
lienket = link;
alert(link);
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
xmlHttp.open("POST",link, true)
xmlHttp.send(null);
xmlHttp.onreadystatechange = mHienThi;
}
else setTimeout('mKetNoi(lienket)', 1000);
}
function mHienThi()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
document.getElementById('hienthi').innerHTML=xmlHttp.responseText;
}
else {alert("Có một số vấn đề trong quá trình truy cập vào cơ sở .");}
}
}
</script>
</html>
?>
Vấn đề cốt lõi trong giải pháp của tôi là ở những dòng code này :
<?
<iframe name="amehistory" style="width: 0xp; height: 0px; display: none" width=0 height=0 border=0 ></iframe>
?>
<?
function mAjax(bv)
{
var html =' <html>n';
html +=' <scr'+'ipt>n';
html +=' var memo="'+bv+'";n';
html +=' parent.mKetNoi(memo);n';
html +=' </scr'+'ipt>n';
html +=' </html>n';
amehistory.document.open();
amehistory.document.write(html);
amehistory.document.close();
}
?>
-------
Đây là phần cuối của công việc fix nút back.
Các bạn copy thêm trang <? response.php ?> cho phần demo :
<?php $lienket = $_GET['link']; ?>
<html>
<script type="text/javascript">
<?php echo "parent.mKetNoi('$lienket')"?>
</script>
<html>
Và sửa lại hàm mAjax thành như sau :
<?
function mAjax(bv)
{
if (navigator.appName == "Microsoft Internet Explorer")
{
var html =' <html>n';
html+=' <scr'+'ipt type="text/javascript">n';
html+=' parent.mKetNoi("'+bv+'");n';
html+=' </scr'+'ipt>n';
html+=' </html>';
amehistory.document.open();
amehistory.document.write(html);
amehistory.document.close();
}
else
{
amehistory.location.href = "response.php?link="+bv;
}
}
?>
Bây giờ có thể chạy được trên cả 2 trình duyệt IE và FF.
Nói thêm :
Sau một thời gian tìm hiểu tôi thấy IE là hay nhất cho việc thiết kế. Nó có những phần tương tự Opera và Firefox.
Để fix nút back hoàn hảo các bạn nên code cho riêng từng trình duyệt. Và trong trang mà bạn định dùng ajax bắt buộc phải có 1 iframe hoặc là một frame:
Đối với Opera hoặc IE dùng duy nhất 1 iframe với 2 thuộc tính
style="width: 100%; height :100%;"
Sau đó dùng js viết thẳng dữ liệu vào khung này.
Đối với FF hoặc IE viết thêm 1 iframe có tính chất sau:
style="width: 0px; height: 0px; display: none"
và viết phần js dùng để hiển thị dữ liệu vào trong khung này giống như trên.
Như vậy các bạn có thể thấy riêng với IE chúng ta có 2 phương án thiết kế.
Nếu không muốn dùng iframe các bạn có thể dùng trực tiếp frame và nhớ đặt chiều cao cho nó = 0px.
Tác giả Uoon
Tác giả:NguyÅn Minh Tân
