<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال onpopstate</title>
</head>
<body>
    <h1>صفحه اصلی</h1>
    <button onclick="goToPage2()">رفتن به صفحه دوم</button>
    
    <script>
        window.onpopstate = function(event) {
            if (event.state) {
                document.title = event.state.title;
                document.body.innerHTML = `<h1>${event.state.title}</h1>`;
            } else {
                document.title = "صفحه اصلی";
                document.body.innerHTML = `<h1>صفحه اصلی</h1>`;
            }
        };

        function goToPage2() {
            var state = { title: "صفحه دوم" };
            history.pushState(state, "صفحه دوم", "/page2");
            document.title = state.title;
            document.body.innerHTML = `<h1>${state.title}</h1>`;
        }
    </script>
</body>
</html>