متد pushState

یکی از راه هایی که آدرس URL رو تغییر بدیم، ولی صفحه رفرش نشه، استفاده از pushState هست.

متد pushState در HTML5 چیزی شبیه به window.location هست، اما این متد صفحه را رفرش یا بارگذاری مجدد نمی کنه. با این متد میتونید لینکهایی درست کنید که حتی به صفحاتی که وجود ندارند اشاره کنه. وقتی از این متد استفاده می کنید، دکمه های back و forward در مرورگر شما کار می کند، عین این میمونه که قبلاً وارد این صفحات شدید و الان تو history مرورگر شما موجود هست.

متد pushState سه پارامتر زیر را دریافت می کنه:

  • – State Object: این شیء جاوااسکریپتی می تونه حاوی هر اطلاعاتی درباره صفحه باشه و حتماً باید serialize باشه.
  • – Title: عنوان صفحه
  • – URL: آدرس صفحه بعد از دامین

دو نمونه کد در پایین قرار میدم، یکی به روش جاوااسکریپت هست و یکی به روش جی کوئری:

 

<script type="text/javascript">
function ChangeUrl(title, url) {
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        alert("Browser does not support HTML5.");
    }
}
</script>
<input type="button" value="Page1" onclick="ChangeUrl('Page1', 'Page1.htm');" />
<input type="button" value="Page2" onclick="ChangeUrl('Page2', 'Page2.htm');" />
<input type="button" value="Page3" onclick="ChangeUrl('Page3', 'Page3.htm');" />
JQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = { Page: page, Url: url };
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            alert("Browser does not support HTML5.");
        }
    }
    $(function () {
        $("#button1").click(function () {
            ChangeUrl('Page1', 'Page1.htm');
        });
        $("#button2").click(function () {
            ChangeUrl('Page2', 'Page2.htm');
        });
        $("#button3").click(function () {
            ChangeUrl('Page3', 'Page3.htm');
        });
    });
</script>
<input type="button" value="Page1" id="button1" />
<input type="button" value="Page2" id="button2" />
<input type="button" value="Page3" id="button3" />

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *