كيفية الحصول على عنوان URL الحالي عبر JavaScript: تحليل تحت الغطاء

كيفية الحصول على عنوان URL الحالي عبر JavaScript: نتعمق في ما هو مخفي تحت الغطاء

تخيل: أنت جالس أمام الكمبيوتر، فتحت المتصفح، وفي شريط العنوان يظهر رابط طويل. تريد أن "يقرأ" سكريبت JavaScript الخاص بك هذا الرابط، ويحلله إلى أجزاء، ويفعل شيئًا مفيدًا بها. موقف مألوف؟ بالتأكيد! هذا واحد من أكثر الأسئلة شيوعًا على Stack Overflow — "Get the current URL with JavaScript?" حصل على مئات الآلاف من المشاهدات. لماذا؟ لأنه لا يخلو أي مشروع جاد من هذه المهمة: التنقل الديناميكي، التحليلات، النماذج، طلبات AJAX — في كل مكان تحتاج إلى معرفة أين نحن.

في هذه المقالة، لن أظهر لك فقط السطر السحري window.location.href، بل سأنظر تحت غطاء المتصفح. ستتعلم كيف يعمل كائن location، وما هي الخصائص التي يخزنها، وكيفية تحليل URL بأمان، وما هي المخاطر التي تنتظرك. هيا بنا!

تعرف على: كائن window.location

في كل مرة تفتح فيها صفحة ويب، يقوم المتصفح بإنشاء كائن خاص — window.location. يعيش هذا الكائن في مساحة الأسماء العامة ويحتوي على جميع المعلومات حول عنوان URL الحالي. يكفي فقط كتابة في وحدة التحكم:

console.log(window.location);

سترى كائنًا يحتوي على العديد من الخصائص. أشهرها:

\n
• href — سلسلة URL الكاملة (مثال: https://pythonlib.ru/blog?page=2#comments).
\n
• protocol — البروتوكول (https: أو http:).
\n
• hostname — اسم المضيف (pythonlib.ru).
\n
• port — المنفذ (إذا لم يتم تحديده، فسلسلة فارغة).
\n
• pathname — المسار إلى الملف أو الصفحة (/blog).
\n
• search — سلسلة الاستعلام (كل ما بعد ?، مثال ?page=2).
\n
• hash — جزء الرابط (كل ما بعد #، مثال #comments).
\n

يقوم المتصفح تلقائيًا بتحديث هذه الخصائص عند الانتقال عبر رابط أو تغيير شريط العنوان. لا يمكنك ببساطة إعادة كتابتها (حسنًا، تقريبًا — سنتحدث عن هذا لاحقًا)، ولكن يمكنك قراءتها بقدر ما تريد.

كيفية الحصول على عنوان URL الكامل: الطريقة الأسهل

إذا كنت بحاجة إلى السلسلة بأكملها، استخدم الخاصية href:

const currentUrl = window.location.href;\nconsole.log(currentUrl);\n// الإخراج: "https://pythonlib.ru/blog?page=2#comments"

هذا هو "المعيار الذهبي". يعمل في جميع المتصفحات، بما في ذلك Internet Explorer (نعم، لا يزال حيًا في بعض الشبكات المؤسسية). احفظه كإجابة شاملة على سؤال "كيفية الحصول على عنوان URL الحالي في JavaScript".

تحليل URL إلى أجزاء: لماذا نحتاج هذا؟

لنفترض أنك تكتب متجرًا إلكترونيًا. تحتاج إلى فهم المعلمات التي تم تمريرها في سلسلة الاستعلام: ?category=books&sort=price. أو تريد التمرير بسلاسة إلى عنصر معين بمرساة #reviews. مجرد أخذ href لا يكفي. تحتاج إلى تحليله إلى مكوناته.

الطريقة الأكثر موثوقية في JavaScript الحديثة هي استخدام المُنشئ URL:

const url = new URL(window.location.href);\nconsole.log(url.searchParams.get('category')); // "books"\nconsole.log(url.hash); // "#reviews"

يمنحك كائن URL الوصول إلى طريقة مريحة searchParams — هذه أداة تحليل حقيقية لسلسلة الاستعلام. يمكنك الحصول على المعلمات وإضافتها وحذفها دون تحليل السلسلة يدويًا. تحت الغطاء، يستخدم نفس خصائص window.location، لكنه يوفر واجهة برمجة تطبيقات أنظف.

تحت الغطاء: كيف يعالج المتصفح عنوان URL

عند إدخال عنوان في شريط المتصفح، تحدث سلسلة كاملة من الأحداث. يقوم المتصفح بتحليل السلسلة إلى مكونات باستخدام خوارزمية موصوفة في مواصفات WHATWG URL Standard. يبدو الأمر مث