Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 107,913

HOME > Client Script Forum > pushState, popState ไม่แสดงผลในหน้าของมันเมื่อกด back หลังจาก reload.



 

pushState, popState ไม่แสดงผลในหน้าของมันเมื่อกด back หลังจาก reload.

 



Topic : 134264



โพสกระทู้ ( 3,539 )
บทความ ( 8 )



สถานะออฟไลน์




มีไฟล์อยู่ 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
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2019-09-26 17:28:24 By : mr.v View : 36 Reply : 0
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : pushState, popState ไม่แสดงผลในหน้าของมันเมื่อกด back หลังจาก reload.
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม

Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่