در این مقاله، به شما نشان خواهیم داد که چگونه می توانید از یک صفحه با استفاده از مکان جاوا اسکریپت تغییر مسیر دهید. تغییر مسیرهای غیرمنتظره از دیدگاه کاربر بسیار آزاردهنده تلقی می شوند زیرا بر تجربه کلی تأثیر منفی می گذارند. به عنوان مثال، اگر کاربران را بلافاصله پس از رفتن به سایت شما به سایت دیگری هدایت کنید. همچنین اگر با یک تایمر یا پس از انجام یک اقدام خاص به یک صفحه خارجی هدایت شوید. این باعث می شود که کاربر بخواهد بلافاصله سایت شما را ترک کند.

علاوه بر این، موتورهای جستجو از منابعی که از تغییر مسیر استفاده می کنند، استفاده نمی کنند، به خصوص اگر آنها کاربران را گمراه کنند. اما مواردی وجود دارد که تغییر مسیر می تواند مفید باشد. بنابراین، تصمیم گیری در مورد استفاده یا عدم استفاده از تغییر مسیر را به عهده شما می گذاریم.

روش های جاوا اسکریپت تغییر مسیر

در جاوا اسکریپت، موقعیت پنجره یا شی موقعیت مکانی برای دریافت اطلاعات در مورد مکان صفحه وب فعلی (سند) و همچنین تغییر آن استفاده می شود. در زیر لیستی از راه هایی است که می توان برای پیاده سازی جاوا اسکریپت تغییر مسیرها استفاده کرد:

//موقعیت جدید پنجره فعلی را تنظیم می کند. window.location = "http://www.example.com"; // یک لینک جدید (URL) برای پنجره فعلی تنظیم می کند. window.location.href = "http://www.example.com"; // یک URL جدید به پنجره فعلی اختصاص می دهد. window.location.assign("http://www.example.com"); // موقعیت پنجره فعلی را با یک پنجره جدید جایگزین می کند. window.location.replace("http://www.example.com"); //محل خود پنجره فعلی را تنظیم می کند. self.location = "http://www.example.com"; // موقعیت بالاترین پنجره را نسبت به پنجره فعلی تنظیم می کند. top.location = "http://www.example.com";

اگرچه خطوط فوق کد جاوا اسکریپت کار مشابهی را انجام می دهند، اما تفاوت های جزئی وجود دارد. به عنوان مثال، اگر از تغییر مسیر top.location در یک عنصر iframe استفاده کنید، این تغییر مسیر را به پنجره اصلی مجبور می کند. نکته دیگری که باید در نظر داشت این است که location.replace() جایگزین سند فعلی می شود و آن را از تاریخچه حذف می کند و از طریق دکمه بازگشت مرورگر در دسترس نمی باشد.

window.location.href = "http://www.example.com";

همچنین می توانید برای کسب اطلاعات بیشتر در مورد نحوه عملکرد window.location از این صفحه دیدن کنید.

جاوا اسکریپت تغییر مسیر: تغییر مسیر در بارگذاری

برای هدایت کاربر به وب سایت دیگری بلافاصله پس از باز کردن سایت خود، می توانید از کد زیر در بالای صفحه خود در داخل عنصر استفاده کنید. . یا اگر از یک فایل js جداگانه استفاده می کنید، کد زیر را در آن فایل قرار دهید و فراموش نکنید که در عنوان صفحه خود به آن اشاره کنید:

فقط URL مثال را با آدرسی که می خواهید به آن تغییر مسیر دهید جایگزین کنید. لازم به ذکر است که با این نوع ریدایرکت بازدیدکنندگان صفحه وب شما را به هیچ وجه نمی بینند و بلافاصله به آدرس مورد نظر هدایت می شوند.

جاوا اسکریپت تغییر مسیر: تغییر مسیر پس از یک دوره زمانی مشخص

برای هدایت کاربر به سایت دیگری پس از مدت زمان مشخصی می توانید از کد زیر استفاده کنید:

تابع href موقعیت مکانی جاوا اسکریپت در بالا، کاربر را 3 ثانیه پس از بارگیری کامل صفحه، از آن دور می کند. می توانید مقدار 3000 ( 3×1000 در میلی ثانیه) به صلاحدید شما.

جاوا اسکریپت تغییر مسیر: تغییر مسیر از یک صفحه پس از یک رویداد یا اقدام کاربر

گاهی اوقات لازم است کاربر را پس از یک رویداد یا اقدام خاص به صفحه دیگری بفرستید. در چنین مواردی، می توانید از یک تست شرط استفاده کنید یا یک رویداد را به عنصر برای انجام تغییر مسیر متصل کنید. دو مثال زیر را در نظر بگیرید:

کد بالا href موقعیت مکانی سند جاوا اسکریپتاگر شرط درست باشد تغییر مسیر می دهد.

روز بخیر، مشترکین و مهمانان وبلاگ من. امروز می خواهم مطلبی بسیار مهم و پرطرفدار را به شما بگویم که مکانیسم های آن در بسیاری از سایت ها و سرویس های وب استفاده می شود. یعنی من توضیح خواهم داد که تغییر مسیر در جاوا اسکریپت چیست.

در این نشریه، اطلاعات مفید زیادی در مورد تغییر مسیر پیدا خواهید کرد، با صنعت اصلی آن آشنا شوید. من همچنین به شما نشان خواهم داد که چگونه می توانید یک تغییر مسیر با استفاده از php، html و حتی htaccess ایجاد کنید. و البته بعد از هر فصل کلیدی نمونه هایی را خواهید دید. و حالا بیایید بریم سر جلسه توضیحات!

ریدایرکت چیست و چرا ایجاد شد؟

ریدایرکت از انگلیسی ترجمه شده به معنای "تغییر مسیر، تغییر مسیر" است. در واقع، با کمک تغییر مسیر، کاربران به طور خودکار به صفحات دیگر منابع وب با استفاده از یک لنگر (پیوند) از پیش تعریف شده هدایت می شوند.

هر یک از شما حداقل یک بار هنگام رفتن به یکی با چنین موقعیت هایی روبرو شده اید و شما را به همان موقعیتی هدایت می کند که فقط از طریق یک پیوند جدید قرار دارد. کاربران همچنین به صفحات یا تبلیغات دیگر هدایت می شوند. همه اینها با استفاده از تغییر مسیرها اجرا می شوند.

به لطف این مکانیسم، می توانید به طور انعطاف پذیر تغییر مسیرها را مدیریت کنید: انتقال به صفحات جدید را با تأخیر تنظیم کنید، در صورت تغییر دامنه، کاربر را با آدرس اینترنتی به آدرس جدیدی هدایت کنید بدون اقدامات اضافی، صفحات را در یک برگه جدید باز کنید. ، در صورت تغییر مسیر ناموفق و غیره، تغییر مسیر را به عقب سازماندهی کنید.

شی مسئول چنین اعمالی است. سند.موقعیت. در واقع این شی دارای تعدادی ویژگی است که برای بدست آوردن اطلاعات کامل در مورد صفحه وب (صفحه) مورد نیاز است.

در حال حاضر، من یک ویژگی که برای تغییر مسیر صفحات استفاده می شود را پوشش می دهم - href. اگر تمایل به تعمیق دانش وجود دارد، در اسناد به دنبال اطلاعات باشید.

چگونه با استفاده از document.location.href تغییر مسیر را پیاده سازی کنیم؟

بنابراین، document.location.hrefشامل مسیر کامل به صفحات وب سرویس است. اگر اکنون خط document.write (document.location.href) را در هر جایی اجرا کنید، در پاسخ یک پیوند کامل به برگه ای که در آن نوشته اید دریافت خواهید کرد.

برای پیاده سازی تغییر مسیر، فقط باید آدرس دیگری را به این ویژگی اختصاص دهید.

تصمیم گرفتم در مورد یک کار خاص مثالی بزنم، که اغلب می توان آن را در بین وظایف در پروژه های واقعی یافت.

بنابراین، شما نوعی منبع وب دارید که در پیوند، به عنوان مثال، http://pfd.ru قرار دارد. اما با گذشت زمان، دامنه مناسب تری را به دست آوردید و بنابراین سایت به آدرس جدید - http://ddd.ru منتقل شد.

از آنجایی که کاربران به پیوند قدیمی عادت کرده اند یا این سرویس را با آدرس قدیمی نشانک کرده اند، باید یک انتقال خودکار را پیاده سازی کنید. در عین حال، باید وظیفه را به گونه ای پیاده سازی کنید که مشتریان تغییرات را ببینند. برای این کار باید پیاده سازی نرم افزار زیر را بنویسید:

اکنون سایت شرکت "****" در آدرس جدید قرار دارد: http://ddd.ru. پس از 6 ثانیه، به طور خودکار به آن هدایت می شوید. اگر انتقال به طور خودکار اتفاق نیفتاد، پیوند را دنبال کنید: http://ddd.ru

به عنوان یک امتیاز کوچک، فکر کردم که نمونه کد دیگری را ضمیمه کنم که زیاد سؤال می شود. گاهی اوقات شرایط دیگری وجود دارد که همراه با تغییر مسیر، باید برخی از داده ها را از طریق روش ارسال POST به صفحه در حال باز شدن منتقل کنید. چنین مکانیزمی را می توان از طریق js نیز پیاده سازی کرد.

برای ارسال هرگونه اطلاعات در نشانه گذاری html، از تگ استفاده می شود

اکنون با استفاده از یک تابع نوشته شده در جاوا اسکریپت، داده ها ارسال می شود:

من به شما گفتم که چگونه با استفاده از ابزارهای زبان js یک تغییر مسیر را پیاده سازی کنید. و حالا بیایید به تحلیل همان مکانیسم، اما در زبان های برنامه نویسی دیگر برویم.

تغییر مسیر به html

این تگ برای هدایت کاربر به سرویس دیگری استفاده می شود. .

در مثال، من شما را به وب سایت رسمی W3C هدایت می کنم. کد پیوست را در هر ویرایشگر موجود اجرا کنید و کار آن را تجزیه و تحلیل کنید.

من کمی در مورد ویژگی های برچسب به شما می گویم .

به این معنی است که یک فایل جدید در پنجره مرورگر فعلی باز می شود. عنصر محتوا مسئول زمان تغییر مسیر (در این مورد 3 ثانیه) و آدرسی است که انتقال به آن انجام می شود.

با این حال، این رویکرد همیشه کار نمی کند.

تغییر مسیر در php

در php نیز از مکان استفاده می شود و مانند نسخه قبلی در هدر قرار می گیرد. به نظر می رسد این است:

header ("مکان: https://www.w3.org/");

پس از پردازش رشته، یک کد وضعیت ریدایرکت سه رقمی برگردانده می شود. اگر نوع تغییر مسیر در ویژگی های هدر مشخص نشده باشد، i.e. کد 201 یا 3**، سپس 302 به طور خودکار برگردانده می شود که یک حرکت موقت را گزارش می دهد.

من می خواهم به یک نکته مهم اشاره کنم. امروزه، همه توسعه دهندگان محترم از تغییر مسیر 301 استفاده می کنند. این امکان را به شما می دهد:

• برای جمع بندی شاخص های مهم خدمات وب، که در نتیجه، حتی هنگام انتقال به یک آدرس جدید، سایت موقعیت خود را در موتورهای جستجو از دست نمی دهد.
• انجام چسباندن نام دامنه با و بدون "www" سه گانه.
• ربات‌ها و کاربران را به‌جای صفحات منسوخ، به صفحات وب جدید هدایت کنید.

دستورالعمل htaccess

در اینجا ما به آرامی به یک دستورالعمل مهم، بسیار مفید، اما همچنین پیچیده .htaccess نزدیک شدیم. این یک سند پیکربندی برای آپاچی و سرورهای مشابه است. اثر آن فقط برای دایرکتوری که در آن قرار دارد اعمال می شود. این امکانات برای زیر شاخه ها نیز اعمال می شود.

تغییر مسیر(از انگلیسی. تغییر مسیر- تغییر مسیر) - این تغییر مسیر یک صفحه از یک سایت به صفحه دیگر یا سایت دیگری است. تغییر مسیر را می توان به روش های مختلفی انجام داد که اصلی ترین آنها در اینجا مورد بحث قرار خواهد گرفت به php تغییر مسیر دهید, جاوا اسکریپت، تغییر مسیر با htmlو با یک فایل htaccess.

از جمله روش های فوق، مرتبط ترین آنها تغییر مسیر php و تغییر مسیر با htaccess. واقعیت این است که این روش ها هستند که نه تنها اجازه می دهند صفحه را تغییر مسیر دهند، بلکه یک صفحه خاص را نیز برگردانند خطای 301(301 تغییر مسیر دائمی). این برای چیست؟ و برای موتورهای جستجو ضروری است.

فرض کنید یک سایت تبلیغ شده با تعداد زیادی بازدیدکننده داشتیم. سپس سایت به دامنه جدیدی منتقل شد. موتور جستجو هنوز آن را نمی داند. ریدایرکت 301 به شما این امکان را می دهد که آدرس های قدیمی و جدید را بچسبانید، در حالی که تمام عناصر بهینه سازی ساخته شده برای این سایت را حفظ کنید و در نتیجه ترافیک و مخاطبان خود سایت را حفظ کنید.

و حالا بیایید به تمام گزینه های لیست شده برای تغییر مسیرها نگاه کنیم، و اجازه دهید با تغییر مسیر به php شروع کنیم.

تغییر مسیر پی اچ پی (301)

تغییر مسیر در php، مانند سایر زبان های برنامه نویسی، بر اساس مشخصات پروتکل HTTP، یعنی ارسال هدرهای لازم است. چگونه کار می کند؟ خیلی ساده. هر بار که به صفحه ای در اینترنت دسترسی پیدا می کنیم، یک پاسخ HTTP از سرور دریافت می کنیم که شامل هدر (هدر) و بدنه (بدن) است. در بدنه پاسخ

هدر ("HTTP/1.1 301 به طور دائم منتقل شد");
header ("مکان: http://site.com/pagename.html");
?>

تغییر مسیر HTML

زبان نشانه گذاری HTML دارای یک متا تگ ویژه برای تغییر مسیر است.

فقط قسمت محتوا تغییر می کند که نشان دهنده تعداد ثانیه های قبل از تغییر مسیر و خود پیوند است که تغییر مسیر در آن انجام می شود. من فکر می کنم ارزش این را ندارد که بگوییم تگ در کد html بین تگ های head قرار می گیرد.

جاوا اسکریپت را تغییر مسیر دهید

شاید غیر قابل اطمینان ترین تغییر مسیر، زیرا کاربر همیشه می تواند جاوا اسکریپت را در مرورگر غیرفعال کند. با این حال، این کار به ندرت انجام می شود، بنابراین روش حق وجود دارد.

در این کد تابعی با تغییر مسیر به صفحه مورد نظر ایجاد می شود و سپس در تابع setTimeout فراخوانی می شود که به شما امکان می دهد پس از مدت زمان مورد نیاز ریدایرکت کنید.

تغییر مسیر htaccess (301)

فایل .htaccess یک فایل سرویس با تنظیمات مختلف سرور آپاچی است. در مورد ما به صورت دستی در ریشه سایت قرار می گیرد. با آن می توانید 301 تغییر مسیر را ترتیب دهید، اما برای این کار باید ماژول های لازم در آپاچی فعال شوند.

با استفاده از دستورالعمل های ماژول mod_alias

سه دستورالعمل در این ماژول وجود دارد: Redirect، RedirectPermanent و RedirectMatch. به نظر می رسد دو مورد اول از نظر خصوصیات یکسان هستند، سومی از هم جدا می شود. برای دو مثال اول:

تغییر مسیر 301 / http://site.com
تغییر مسیر /index.html دائمی http://site.com
RedirectPermanent /index.html http://site.com/default.html

خطوط مشابه هستند. اما به نظر می رسد یک منهای وجود دارد - برای تغییر مسیر همه صفحات، به همه آنها نیاز دارید و در لیست نشان داده می شوند. برای تسهیل کار، دستورالعمل دیگری وجود دارد:

RedirectMatch /(.*)\.html$ /$1.php

می توانید عبارات منظم را برای تغییر مسیر از آدرس قبلی به آدرس جدید تنظیم کنید.

استفاده از دستورات mod_rewrite

برای جلوگیری از خواندن مضاعف صفحات مشابه توسط موتورهای جستجو، گاهی اوقات لازم است تمام آدرس ها را از دامنه بدون www به دامنه ای با www تغییر مسیر دهید. مثلا،

#ماژول و گزینه اضافی لازم را روشن کنید
بازنویسی موتور روشن
Options +FollowSymLinks
#دو خط برای تغییر مسیر از "without vvv" به "with vvv"
RewriteCond %(HTTP_HOST) ^site.com
RewriteRule (.*) http://www.site.com/$1

به جای نتیجه گیری

اگر هنوز از این سؤال که چه چیزی را انتخاب کنید عذاب می دهید (البته این شما را با گیره و قیچی عذاب می دهد - ویرایش) ، پس وقت آن است که رنج را متوقف کنید (چی می گویید! - ویرایش). بیایید به تغییر مسیر php (یا زبان برنامه نویسی دیگری که در اینجا بحث نشده است، به عنوان مثال Perl) و تغییر مسیر با استفاده از فایل htaccess نگاه کنیم، زیرا آنها به شما اجازه می دهند تا سایت را بدون هیچ ضرری برای بهینه سازی موتور جستجو منتقل کنید. اگر مهم نیست، پس هر روشی انجام خواهد شد. و در واقع در این نت پایانی (نمک؟ لا؟ سی؟ - ویرایش) من این پست را تمام می کنم.

چهار گزینه برای تغییر مسیر (تغییر مسیر) کاربران، به وضوح و با مثال.

1. تغییر مسیر از طریق جاوا اسکریپت - فقط در صورتی کار می کند که کاربر پشتیبانی JS را در دستگاه فعال کرده باشد. نگران نباشید، درصد کاربران بدون JS ناچیز است. اگر می خواهید بررسی کنید که چقدر ناراحت کننده است - فقط JS را در مرورگر خود برای یک روز غیرفعال کنید.

کد تغییر مسیر کار:

2. تغییر مسیر Html

این مثال کاربر را با 1 ثانیه تاخیر به آدرس مورد نظر هدایت می کند.

یادم می آید که در IE درست کار نمی کرد یا بهتر بگویم اصلا کار نمی کرد. اگر استفاده می کنید - فقط در صورت امکان بررسی کنید.

3. به php تغییر مسیر دهید

ساده و خوش سلیقه یک فایل php با محتوای زیر:

4. تغییر مسیر از طریق htaccess

تغییر مسیر / http://url4trafic.ru

هنگام هدایت ترافیک از شبکه های اجتماعی، در موارد کلی، مرتبط ترین گزینه از مثال شماره 1 است، با یک اضافه کوچک - یعنی استفاده از نشانه گذاری ogp. برای کمی واضح تر، علامت گذاری Open Graph یک پروتکل نشانه گذاری محتوای صفحه برای ارسال محتوای آن در شبکه های اجتماعی است. هنگام انتشار پیوند به یک شبکه اجتماعی، می توانید به صورت "دستی" مشخص کنید که کدام تصویر کوچک و توضیحات نمایش داده شود.

یک نمونه کار (عدم دقت و کاستی ممکن است، اما هنوز هم کار می کند :)

هنگام انتشار در VKontakte چگونه به نظر می رسد:

نکات برجسته مختصر:
- مشخص می کند که از نشانه گذاری Open Graph استفاده خواهد شد
- - یک توضیحات وسوسه انگیز را پر کنید - در مثال بالا "جان سینا تاریخ بازگشت خود را نامگذاری کرد" است.
- - یک عنوان جذاب - در مثال بالا، "جان سینا به مسابقات بازگشت - اخبار WWE Wrestling" است.
- - این مسیر تصویری است که بارگذاری می شود - در مثال بالا، این همان مرد با تی شرت آبی است.
برای زیبا و بزرگ شدن لینک، ابتدا تصویر باید اندازه کافی داشته باشد. به عنوان مثال، برای VKontakte، این بیش از 537x240 پیکسل است. بهتر - بیشتر.

Location="http://url4trafic.ru"، درست حدس زدید، آدرس اینترنتی است که کاربر را در آن ارسال خواهیم کرد.

تغییر مسیر- این یک تغییر مسیر خودکار کاربر از یک آدرس به آدرس دیگر است. یعنی شخصی از یک سایت بازدید می کند، اما در نهایت به سایتی کاملاً متفاوت (یا در صفحه دیگری از یک سایت) می رسد. من فکر می کنم شما اغلب این را دیده اید. گاهی تغییر مسیر با تاخیر انجام می شود. به طور کلی، موضوع بسیار مهم است و من در این مقاله به آن خواهم پرداخت.

به طور کلی، ما در مورد صحبت می کنیم شی مکان، که است ویژگی شی Document. در شی مکانیک ملک وجود دارد href، که برای پیاده سازی استفاده می شود جاوا اسکریپت تغییر مسیر. این ویژگی هم برای خواندن و هم برای نوشتن در دسترس است. ابتدا آن را بخوانیم:

Document.write(document.location.href);

در نتیجه آدرس کامل اسکریپت خود را خواهید دید.

حالا بیایید ساده ترین کار را انجام دهیم جاوا اسکریپت تغییر مسیر:

Document.location.href = "http://site";

بنابراین، همه کاربرانی که این اسکریپت را اجرا می کنند به طور خودکار به سایت می روند: http://site".

حالا بیایید یک کار کلاسیک را انجام دهیم که اغلب اجرا می شود. فرض کنید شما یک وب سایت دارید: http://a.ru. سپس یک دامنه جدید برای سایت خود خریداری کردید و آدرس آن به صورت زیر شد: http://b.ru. و می خواهم همه بازدیدکنندگان از آنجا بروند http://a.ruروی جدید http://b.ru. علاوه بر این، می خواهید آنها بدانند که سایت شما دارای یک آدرس جدید است. شرایط آشناست؟ بنابراین، این با استفاده از تغییر مسیر با تاخیر اجرا می شود:

وب سایت ما یک آدرس جدید دارد: http://b.ru. بعد از 5 ثانیه به آن هدایت می شوید. اگر این اتفاق نیفتاد، پس خودتان بروید: http://b.ru

ابتدا کاربر پیام را می بیند و بعد از آن 5 چند ثانیه، از قبل به آدرس جدید می رود. اگر به طور ناگهانی کاربر غیرفعال شده باشد جاوا اسکریپت، سپس می تواند به تنهایی با کلیک کردن بر روی پیوند حرکت کند.