از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
بیایید یک کار اساسی در توسعه وب را بررسی کنیم: تازه کردن یک صفحه وب. اما ما در مورد کلاسیک صحبت نمی کنیم F5 یا CTRL+R اینجا. ما در عوض از جاوا اسکریپت و جی کوئری برای بازخوانی برنامه‌ای یک صفحه استفاده می‌کنیم. این یک ترفند مفید برای مواقعی است که نیاز به تجدید «سخت» دارید.
چرا یک صفحه را به صورت برنامه ای بازخوانی کنیم؟
زمان های مختلفی وجود دارد که این می تواند مفید باشد. به عنوان مثال، ممکن است بخواهید زمانی که رویداد خاصی رخ می‌دهد، صفحه‌ای را به‌طور خودکار بارگیری مجدد کنید، یا یک صفحه را پس از یک بازه زمانی خاص بازخوانی کنید تا آخرین داده‌ها را از سرور دریافت کنید. این به ویژه در برنامه های پویا که محتوا به طور مکرر به روز می شود مفید است (مانند فید اخبار زنده یا داشبورد بلادرنگ)، اما به هر دلیلی، به روز رسانی ناهمزمان از طریق AJAX ندارید.
تازه کردن صفحه با Plain JS
بیایید با جاوا اسکریپت ساده و قدیمی شروع کنیم. ساده ترین راه برای بازخوانی یک صفحه با استفاده از جاوا اسکریپت، استفاده از آن است location.reload() روش. که فقط با این یک روش فراخوانی قابل استفاده است:
location.reload();
وقتی این کد اجرا شد، صفحه فعلی دوباره بارگذاری می شود. به همین سادگی! اما به یاد داشته باشید، این کار کل صفحه را تازه می کند، به این معنی که هرگونه تغییر ذخیره نشده در ورودی های فرم از بین خواهد رفت.
توجه داشته باشید: یک پیچ خفیف در آن وجود دارد location.reload() روش. یک پارامتر بولی را می پذیرد. وقتی روی true، باعث بارگذاری مجدد سخت از سرور می شود. وقتی روی false یا تعریف نشده باقی بماند، یک بارگذاری مجدد نرم از آن انجام می دهد کش مرورگر. بنابراین، فقط به این موضوع توجه داشته باشید location.reload(true) و location.reload() متفاوت رفتار کن!
تازه کردن صفحه با جی کوئری
در مرحله بعد، بیایید ببینیم چگونه یک صفحه را با استفاده از jQuery به روز کنیم. جی کوئری روش داخلی برای به‌روزرسانی صفحه ندارد، اما انجام آن با استفاده از جاوا اسکریپت آسان است. location.reload() روش.
در حالی که jQuery در واقع یک روش داخلی برای انجام به‌روزرسانی صفحه ندارد، ما می‌توانیم در عوض از برخی رویدادهای آن استفاده کنیم تا بدانیم چه زمانی باید به‌روزرسانی شود. مثلا:
$("#refresh-button").click(function() {
location.reload();
});
در اینجا زمانی که کاربر روی “دکمه تازه” ما کلیک می کند، صفحه را بازخوانی می کنیم.
خطاهای رایج و نحوه رفع آنها
هنگام کار با جاوا اسکریپت یا جی کوئری برای بازخوانی یک صفحه وب، ممکن است چندین خطای رایج رخ دهد. بیایید نگاهی به چند مورد از آنها و راه حل های آنها بیندازیم.
حلقه بی نهایت بازخوانی صفحه
این زمانی اتفاق می‌افتد که کد به‌روزرسانی صفحه در مکانی قرار می‌گیرد که هر بار که صفحه بارگیری می‌شود، اجرا می‌شود. از آنجایی که دستور refresh صفحه را دوباره بارگذاری می کند، در یک حلقه بی نهایت از رفرش ها گیر می کند.
// This will cause an infinite loop of page refreshes
window.onload = function() {
location.reload();
}
برای جلوگیری از این، مطمئن شوید که شرایطی دارید که می تواند حلقه را بشکند.
// This will refresh the page only once
if (!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
Uncaught TypeError: location.reload() یک تابع نیست
این خطا زمانی رخ می دهد که می خواهید با آن تماس بگیرید location.reload() متد روی شیئی که آن را ندارد. به عنوان مثال، اگر شما به اشتباه تماس بگیرید location.reload() در یک شی jQuery، با این خطا مواجه خواهید شد.
$('#myDiv').location.reload(); // Uncaught TypeError: $(...).location is not a function
برای رفع این مشکل، مطمئن شوید که تماس می‌گیرید location.reload() بر روی شی صحیح که همان است window یا location هدف – شی.
window.location.reload(); // Correct usage
نتیجه
در این بایت، نحوه رفرش کردن یک صفحه با استفاده از جاوا اسکریپت و جی کوئری را توضیح داده ایم. ما همچنین به برخی از خطاهای رایجی که ممکن است هنگام بازخوانی یک صفحه رخ دهد و نحوه رفع آنها نگاه کرده ایم. فقط به یاد داشته باشید، تازه کردن صفحه باعث از بین رفتن تغییرات ذخیره نشده می شود، و همیشه تجربه خوبی برای کاربر نیست، بنابراین از آن به اندازه کافی استفاده کنید.
(برچسب ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1402-12-26 03:17:58
