از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
جاوا اسکریپت: روش تغییر مسیر به یک صفحه وب دیگر اغلب اوقات، ما باید کاربران را به وب سایت یا وب دیگری هدایت کنیم page روی همین سایت راه های مختلفی برای تغییر مسیر وجود دارد که شامل تغییر مسیر جاوا اسکریپت، تغییر مسیر سمت سرور و تغییر مسیر متا رفرش HTML می شود. تغییر مسیر اساسا مکانیزمی برای ارسال کاربران به آدرس URL دیگری است. انگیزه استفاده از …
سرفصلهای مطلب
معرفی
اغلب اوقات، ما نیاز داریم که کاربران را به وب سایت یا وب دیگری هدایت کنیم page روی همین سایت راه های مختلفی برای تغییر مسیر وجود دارد که عبارتند از تغییر مسیر جاوا اسکریپت، تغییر مسیر سمت سرور، و تغییر مسیر متا refresh HTML. تغییر مسیر اساسا مکانیزمی برای ارسال کاربران به آدرس URL دیگری است.
انگیزه استفاده از تغییر مسیر می تواند متفاوت باشد، در بیشتر موارد، به این دلیل است:
-
شما به هر دلیلی به دامنه دیگری منتقل شده اید، بنابراین می توانید هنگام دسترسی به محتوا، کاربران را به دامنه جدید هدایت کنید روی یک دامنه قدیمی
-
شما چندین صفحه دارید که محتوای آنها متفاوت است روی بر اساس مکان، زبان، مرورگرها یا سایر عوامل روی که کاربران را به مناسب ترین آنها هدایت می کنید page.
-
شما درخواست های کاربران احراز هویت نشده یا غیرمجاز را به منابع به یک ورود هدایت می کنید page.
-
شما کاربران را به صفحات دیگر مرتبط با محتوای سایت فعلی می فرستید.
همه اینها عملاً از طریق به دست می آیند Location شیئی که شامل اطلاعات URL. چند راه برای انجام این کار وجود دارد، با سر و کله زدن در مورد خواص مختلف Location هدف – شی. در این آموزش نگاهی به این خواهیم داشت چگونه کاربر را به یک صفحه وب دیگر در جاوا اسکریپت هدایت کنیم و برای به حداقل رساندن تأثیر منفی احتمالی سئو به چه نکاتی توجه کنید.
را window.location ویژگی
را window.location شی نشان دهنده موقعیت فعلی، یا بهتر است بگوییم، URL پنجره/کاربر. از نظر فنی یک فقط خواندنی با این وجود، می توانیم با اختصاص مقادیر جدید، آن را دستکاری کنیم (DOMStringث) به خواص آن. را windows پیشوند در windows.location شی را می توان حذف کرد زیرا به صورت سلسله مراتبی در بالای دامنه قرار دارد.
تغییر مسیر کاربران با location.href
را location.href ویژگی URL فعلی را به عنوان یک رشته نشان می دهد. تغییر دادن href ویژگی نیز به طور خودکار کاربر را به جدید هدایت می کند href ارزش. تغییر دادن href ویژگی به سادگی اختصاص دادن یک مقدار جدید به آن است:
location.href = "https://rasanegar.com/";
توجه داشته باشید: یک خط کد از نظر عملکردی معادل است:
windows.location = "https://rasanegar.com";
شایان ذکر است که شما می توانید کاربر را به یک دامنه هدایت کنید دیگر از دامنه ای که در حال حاضر هستند روی با این رویکرد، مسائل امنیتی می تواند از این امر ناشی شود، بنابراین در صورت امکان باید از این عمل اجتناب شود.
تغییر مسیر است معمولا مرتبط با نوعی رویداد، مانند فشار دادن دکمه ای که کاربر را به یک صفحه وب دیگر هدایت می کند، یا رویدادهای دیگر، مانند انجام عملیات توسط کاربر روی یک وب سایت (در حال آپلود یک تصویر روی برای مثال، رسانه های اجتماعی، پس از آن به آن پست هدایت می شوند). بیایید یک تابع ساده بنویسیم که کاربر را تغییر مسیر دهد روی کلیک یک دکمه:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Redirection</title>
<script type = "text/javascript">
function Redirect() {
window.location.href = "https://rasanegar.com/";
}
</script>
</head>
<body>
<input type="button" value="Redirect Me" onclick="Redirect()"/>
</body>
</html>
تنظیم کردن href دارایی مشابه چیزی است که a کلیک ماوس انجام خواهد داد.
تغییر مسیر کاربران با location.assign()
را location.assign(url) روش بارگیری منبع در ارائه شده است url، و آن را در قسمت نمایش می دهد window. این در واقع رویکرد ترجیحی برای هدایت مجدد کاربران در مقایسه با تنظیم است href دارایی، زیرا آن را نیز بررسی می کند ایمنی از ارائه شده است url، در صورتی که مقصد امنی نباشد، استثناء می اندازد. مزیت دیگر این است که یک ورودی جدید در آن ایجاد می کند تاریخچه مرورگر، به کاربر این امکان را می دهد که به راحتی برود “بازگشت” اگر آنها مایلند
همچنین شایان ذکر است که location.assign() منشاء متقاطع را مجاز نمی‌داند تغییر مسیر شما فقط می توانید به همان دامنه ای که در آن تماس برقرار می شود تغییر مسیر دهید که تأثیر مثبتی دارد روی امنیت.
به غیر از آن، می توان از آن به همان شیوه ای استفاده کرد که یک مقدار جدید به آن اختصاص می دهد location.href. بیایید خودمان را بازنویسی کنیم page برای استفاده از assign() عملکرد به جای:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assigning</title>
<script type = "text/javascript">
function Assign() {
window.location.assign("https://rasanegar.com/");
}
</script>
</head>
<body>
<input type="button" value="Redirect Me" onclick="Assign()" />
</body>
</html>
تغییر مسیر کاربران با location.replace()
را replace(url) روش می تواند مورد استفاده قرار گیرد جایگزین کردن منبع فعلی روی را window، با منبع بارگیری شده از url. واقعا اینطور نیست تغییر مسیر یک کاربر، و در تاریخچه مرورگر ذخیره نمی شود. همان محدودیت‌های امنیتی وجود دارد assign() روش، که این روش را به یک روش مطلوب تبدیل می کند تا در صورت تمایل به جایگزینی محتوا با دیگری استفاده شود page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Replacing</title>
<script type = "text/javascript">
function Replace() {
window.location.Replace("https://rasanegar.com");
}
</script>
</head>
<body>
<input type="button" value="Redirect Me" onclick="Replace()" />
</body>
</html>
همچنین شایان ذکر است که assign() روش دارای یک جنبه منفی بالقوه جدی است. اگر قرار است کاربر به a برگردد page که به طور خودکار اجرا می شود assign() روش، آنها هدایت می شوند بازگشت به page آنها سعی کرده اند بروند بازگشت از. آنها سپس از طریق یک حلقه بازگشت به عقب را وارد می کنند دکمه برگشت، اما به دیگری هدایت می شود page با توجه به assign() روش.
اگر استفاده می کنید assign()، مطمئن شوید که اینطور است نه به طور خودکار تماس گرفت روی را page، و اینکه فراخوانی آن مستلزم اقدام کاربر است، مانند فراخوانی آن روی یک دکمه اگر نه – استفاده کنید location.replace().
علاوه بر این، location.replace() نزدیکترین به یک است تغییر مسیر HTTP، از آنجایی که پیوند اصلی به تاریخچه مرورگر اضافه نمی شود.
مفاهیم امنیتی و عوارض جانبی
امنیت ذکر شده برای تمامی روش های فوق اعمال می شود و به جنبه های زیر اشاره دارد:
- اگر مبدا اسکریپتی که متد را فراخوانی می کند با مبدا جریان یکسان نباشد page – به عنوان یک نقض امنیتی و DOMEexception از
SECURITY_ERRORنوع پرتاب خواهد شد. به این معناست که کتابخانه ها و خدمات خارجی در کتابخانه شما تعبیه شده است page نمی تواند کاربران را تغییر مسیر دهد. - اگر URL ذخیره شده نامعتبر است، الف
DOMExceptionپرتاب خواهد شد. - اگر کاربر را به دامنه ای غیر از دامنه ای که قبلاً بوده هدایت می کنید روی، CORS ممکن است وارد شود و از آن جلوگیری کند.
برخی از عوارض جانبی احتمالی که ممکن است به دلیل مسائل طراحی ناشی از انسان رخ دهد عبارتند از:
- هنگام تغییر مسیر (غیر از
replace()) خیلی سریع اتفاق می افتد (یعنی در کمتر از 3 ثانیه) می تواند دکمه برگشت را بشکند روی یک مرورگر این بدان معنی است که هر بار که سعی می کنید به حالت قبلی برگردید page، تغییر جهت یک بار دیگر تقریباً بلافاصله رخ می دهد و یک حلقه بی نهایت ایجاد می کند. - می توان آن را به عنوان صفحه درگاه (به عنوان مثال صفحات ایجاد شده برای دستکاری شاخص های SEO) در نظر گرفت که توصیه نمی شود
- تغییر مسیرهای برنامه ریزی شده و استفاده نشده می تواند باعث تغییر مسیرهای زنجیره ای، تغییر مسیر بین دو یا چند صفحه شود.
نفوذ روی سئو
وجود دارد زیاد عواملی که بر سئو تأثیر می گذارند و بسیاری از آنها در واقع به طور عمومی شناخته نشده اند، مبادا از آنها سوء استفاده شود. اگرچه، آنچه مسلم است این است که کد بهینه سازی ضعیف می تواند تأثیر منفی بگذارد روی سئو. این می تواند به زمان بارگذاری طولانی تر، زنجیره تغییر مسیرها یا حتی حلقه ها منجر شود. برخی از خزنده های وب ممکن است سعی کنند کد جاوا اسکریپت را اجرا کنند تا نمایش دقیق تری از آن به دست آورند page، اما مواردی که این کار را نمی کنند می توانند منجر به “نمره سئو” پایین تر شوند.
بهترین راه برای غلبه بر این مشکل ممکن است:
-
برای یا به درستی صدور یک تغییر مسیر HTTP روی را سمت سرور با هر یک از کدهای وضعیت تغییر مسیر (
301..308) یا برای صدور الف404برای صفحاتی که دیگر نمی خواهید host یا برای تغییر مسیر به. -
برای اطلاع موتورهای جستجو از یک نسخه تکراری page با اضافه کردن
<link rel="canonical" href="https://original_link"/>در<head></head>بخش. اجرای این کار آسان تر از انجام هر کار اضافی است روی سمت سرور، اما به خاطر داشته باشید که همه خزنده های وب از آن استقبال نمی کنند.
نتیجه
در این آموزش، روش اجرای a را بررسی کرده ایم تغییر مسیر با استفاده از جاوا اسکریپت، و همچنین مفاهیم امنیتی و نفوذ بالقوه روی سئو.
منتشر شده در 1403-01-16 14:11:16
