اگر تا به حال فکر کرده اید که چگونه می توانید یک صفحه را به هنگام بارگذاری بدون ایجاد تازه کردن ثابت ، یک صفحه را مجبور کنید ، تنها نیستید. این یک نیاز متداول برای برنامه های مختلف است ، به ویژه هنگامی که می خواهید یک بار بدون ایجاد یک حلقه بی پایان ، محتوای یک صفحه وب را تازه کنید. در این مقاله ، ما روش هایی را برای دستیابی به یک صفحه واحد با استفاده از HTML و JavaScript کشف خواهیم کرد.
درک مجدد صفحه در HTML
تجدید صفحه در HTML اغلب با استفاده از برچسب. ساده ترین رویکرد شامل http-equiv="refresh" ویژگی در برچسب. با این حال ، درک این نکته که بدون تعیین زمان ، صفحه می تواند بدرفتاری کند ، بسیار مهم است.
با استفاده از برچسب متا برای تازه کردن
ممکن است استفاده از نحو زیر را در نظر بگیرید:
از نظر تئوری ، ویژگی محتوا را خالی می کند (همانطور که سعی کردید) ، نباید کار کند زیرا مرورگر به طور معمول این را به عنوان یک دستورالعمل برای تازه کردن فوراً تفسیر می کند. بنابراین ، توصیه می شود فاصله زمانی را تعیین کنید. یک رویکرد بهتر ممکن است تعیین یک مقدار زمان بسیار کوتاه (مانند 1 ثانیه) و استفاده از JavaScript برای جلوگیری از طراوت های بیشتر باشد.
برچسب متا HTML پیشنهاد شده
در اینجا چگونه می توانید HTML خود را تنظیم کنید تا فقط یک بار تازه کنید:
این صفحه بعد از یک ثانیه صفحه را تازه می کند و همان صفحه را بارگیری می کند ، اما هنوز هم ممکن است کاربران یک تازه کردن ناخواسته را تجربه کنند.
رویکرد توصیه شده با استفاده از JavaScript
یک روش کنترل شده تر برای مجبور کردن یک تازه سازی واحد استفاده از JavaScript است. این روش کنترل دقیقی را در مورد زمان و نحوه وقوع تازه سازی به شما می دهد. در اینجا راهی برای تنظیم آن وجود دارد:
مرحله 1: JavaScript را به HTML خود اضافه کنید
شما می توانید کد JavaScript زیر را در HTML خود جاسازی کنید ، در حالت ایده آل در section or just before the closing tag:
توضیح فیلمنامه
- ذخیره سازی: این روش ذخیره سازی وب مقدار را برای مدت زمان جلسه صفحه ذخیره می کند (تا زمانی که برگه/مرورگر بسته نشود). در اینجا ، بررسی می کند که آیا کلید “تازه شده” وجود دارد یا خیر.
- اگر کلید وجود نداشته باشد ، کلید را تنظیم می کند ، که ثبت می کند که صفحه یک بار تازه شده است و متعاقباً صفحه را بارگیری می کند.
- اگر دوباره صفحه بارگیری شود ، از آنجا که کلید اکنون وجود دارد ، منطق تازه سازی را اجرا نمی کند.
مثال کامل کد HTML
در اینجا یک مثال کامل از نحوه نگاه HTML شما آورده شده است:
Single Refresh Page Example
This page will refresh only once upon loading.
پایان
مجبور کردن یک صفحه واحد با استفاده از HTML با برچسب متا بهینه نیست زیرا خالی کردن ویژگی محتوا ممکن است منجر به چرخه های تازه سازی مداوم شود. در عوض ، استفاده از JavaScript با SessionStorage مکانیسم مؤثر و کاربر پسند را برای دستیابی به یک تازه سازی واحد فراهم می کند. همیشه تست کنید تا اطمینان حاصل شود که اجرای شما همانطور که در همه مرورگرها انتظار می رود کار می کند.
سوالات متداول
آیا می توانم از
نه ، ترک مقدار زمان خالی به طور معمول باعث تجدید فوری می شود ، که معمولاً مطلوب نیست. بهتر است حداقل زمان را تعیین کنید.
آیا استفاده از JavaScript با SEO تداخل دارد؟
نه ، تا زمانی که از JavaScript با مسئولیت پذیری استفاده کنید و یک حلقه بی پایان از تازه کردن ایجاد نکنید ، نباید بر سئو شما تأثیر منفی بگذارد.
آیا این کار روی همه مرورگرها خواهد بود؟
بله ، مرورگرهای مدرن پشتیبانی می کنند sessionStorage، ساختن این رویکرد در اکثر سیستم عامل های وب فعلی سازگار است.
