تغییر URL درمرورگربدون Reload کردن صفحه توسط JavaScript و jQuery

یکشنبه 8 شهریور 1394

در این مقاله توضیح خواهیم داد که چطور آدرس URL را در آدرس بار مرورگر بدون Reload کردن صفحه با استفاده از HTML5 History API در JavaScript و jQuery تغییر دهیم.

تغییر URL درمرورگربدون Reload کردن صفحه توسط JavaScript و jQuery

HTML5 History API با استفاده از متد pushState، این امکان را به مرورگر می دهد که آدرس را در نوار آدرس مرورگر بدون reload صفحه تغییر دهد.

متد HTML5 History pushState 

متد pushState مشابه window.location عمل می کند. با این تفاوت که window.location صفحه را refresh و reload نمی کند و در صورت وجود نداشتن صفحه آدرس URL را تغییر می دهد. درواقع، این متد ورودی را در history مرورگر که به ما اجازه برگشت (Back) می دهد، وارد می کند و با دکمه های Back و Forward در صفحه های مرورگر جلو و عقب می رود.

متد pushState پارامترهای زیر را می پذیرد:

1. State object: یک شی JavaScript که می تواند شامل هر جزییاتی درباره ی صفحه باشد و لازم است که serializable باشد.

2. Title: شامل عنوان صفحه می باشد.

3. URL: شامل آدرس صفحه می باشد.

تغییر URL در نوار آدرس بدون Reload صفحه با استفاده از javScript

HTML Markup شامل سه دکمه است که باعث فراخوانی تابع  ChangeUrl می شوند. این تابع  Title و URL صفحه را به عنوان پارامتر می پذیرد. ابتدا بررسی می کند که آیا مرورگر از HTML5 پشتیبانی می کند، در صورت پشتیبانی کردن یک State object شامل Title و URL ایجاد می شود و به متد  HTML5 History pushState ارسال می شود.

<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');" />

تغییر URL در نوار آدرس بدون Reload صفحه با استفاده از jQuery

فایل HTML شامل 3 دکمه است که به رویداد کلیک jQuery تخصیص داده شده اند. متد ChangeUrl در رویداد کلیک فراخوانی می شود که Title و URL صفحه را به عنوان پارامتر می پذیرد. ابتدا بررسی می کند که آیا مرورگر از HTML5 پشتیبانی می کند، در صورت پشتیبانی کردن یک State object شامل Title و URL ایجاد می شود و به متد  HTML5 History pushState ارسال می شود.

<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" />

این کدها در نسخه هایی از مرورگرهای FireFox،Chrome، Opera،safari و IE که از HTML5 پشتیبانی می کنند، تست شده است.

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید