 |
pushState, popState ไม่แสดงผลในหน้าของมันเมื่อกด back หลังจาก reload. |
| |
 |
|
|
 |
 |
|
มีไฟล์อยู่ 2 ไฟล์ดังนี้
Code (JavaScript)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.content {
border: 1px dashed #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h1>Example AJAX and URL change.</h1>
<a class="ajax-link" href="page2.html">Go to page 2</a>
<div class="content">
Page 1 content. The ajax content will be display in here.
</div>
<script>
document.querySelector('.ajax-link').addEventListener('click', function(event) {
event.preventDefault();
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
let htmlContent = (new DOMParser)
.parseFromString(xhr.response, "text/html")
.documentElement
.querySelector('.content')
.innerHTML;
document.querySelector('.content').innerHTML = htmlContent;
history.pushState({'pageUrl': event.target.href, 'content': htmlContent}, '', event.target.href);
}
}
xhr.open('GET', event.target.href);
xhr.send();
});
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
console.log(event.state);
if (event.state.content) {
document.querySelector('.content').innerHTML = event.state.content;
}
});
history.replaceState({
content: document.querySelector('.content').innerHTML,
}, document.title, document.location.href);
</script>
</body>
</html>
page1.html
Code (JavaScript)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<a href="page1.html">Go to page1</a>
</div>
<div class="content">
Page 2 content.
</div>
<script>
</script>
</body>
</html>
page2.html
ลำดับมันจะซับซ้อนหน่อยนะ 
ลำดับเหตุการณ์:
* เปิดหน้า page1.html
* คลิกลิ้งค์ไปหน้า page2.html
* JS จะทำการเรียกโดยผ่าน XHR (AJAX) มาแสดงผล ถูกต้อง
* URL เปลี่ยนเป็น page2.html ถูกต้อง
* กด back กลับมา
* เนื้อหากลับมาเป็นของหน้าแรก ถูกต้อง
* URL เปลี่ยนเป็น page1.html ถูกต้อง
* กด forward กลับไป
* เนื้อหาแสดงผลของหน้า page 2 ถูกต้อง
* URL เปลี่ยนเป็น page2.html ถูกต้อง
จากกระบวนการคลิกแล้วกลับไปกลับมา มันก็ปกติดี แต่... เมื่อเจอการใช้งานแบบนี้ มันกลับเดี้ยงครับ!???
ลำดับต่อจากด้านบน
* หลังจากคลิกกลับไปหน้า page 2
* กด F5 หรือ reload, refresh 1 ที
* มันจะแสดงผลของหน้า page2.html ถูกต้อง
* กด back กลับมา
* เนื้อหาค้างเติ่งอยู่ที่หน้า page2.html ไม่ยอมแสดงเนื้อหาของ page 1 อันนี้มีปัญหาครับ
* URL เปลี่ยนเป็น page1.html ถูกต้อง
ทำยังไงให้มัน reload ที่หน้า page2.html แล้วกด back กลับมาก็แสดงหน้า page1.html ได้ถูกต้องครับ?
Tag : HTML5, JavaScript, Ajax
|
ประวัติการแก้ไข
2019-09-26 17:39:03
|
 |
 |
 |
 |
| Date :
2019-09-26 17:28:24 |
By :
mr.v |
View :
2177 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
น่าจะเป็นปัญหา browser bug ลองแล้วไม่ได้เช่นกัน
|
| |
|
|
| |
| Date :
2020-08-02 23:09:55 |
By :
PhrayaDev |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
