كيف يمكنني تعديل عنوان URL دون إعادة تحميل الصفحة؟

Question

هل هناك طريقة يمكنني من خلالها تعديل عنوان URL للصفحة الحالية دون إعادة تحميل الصفحة؟

أود الوصول إلى الجزء قبل # التجزئة إن أمكن.

أنا فقط بحاجة لتغيير الجزء بعد، بعدما المجال ، لذلك ليس الأمر كما لو أنني انتهك سياسات النطاق المتقاطع.

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads

Answer 1

يمكن الآن القيام بذلك في Chrome و Safari و Firefox 4+ و Internet Explorer 10pp4+!

انظر إجابة هذا السؤال لمزيد من المعلومات:تحديث شريط العناوين مع عنوان URL جديد بدون تجزئة أو إعادة تحميل الصفحة

مثال:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

يمكنك بعد ذلك الاستخدام window.onpopstate لاكتشاف التنقل في الزر الخلفي/الأمامي:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

---

للحصول على نظرة أكثر تعمقا على معالجة تاريخ المتصفح ، انظر هذا المقال MDN.

Answer 2

قدم HTML5 history.pushState() و history.replaceState() الطرق ، التي تسمح لك بإضافة وتعديل إدخالات التاريخ ، على التوالي.

window.history.pushState('page2', 'Title', '/page2.php');

اقرأ المزيد عن هذا من هنا

Answer 3

يمكنك أيضًا استخدام HTML5 استبدال إذا كنت ترغب في تغيير عنوان URL ولكن لا تريد إضافة الإدخال إلى تاريخ المتصفح:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

هذا من شأنه أن "يكسر" وظائف زر الخلفية. قد يكون هذا مطلوبًا في بعض الحالات مثل معرض الصور (حيث تريد أن يعود زر العودة إلى صفحة فهرس المعرض بدلاً من العودة عبر كل صورة شاهدتها) مع إعطاء كل صورة عنوان URL الفريد الخاص به.

Answer 4

ملاحظة: إذا كنت تعمل مع HTML5 المتصفح ثم يجب أن تتجاهل هذه الإجابة. هذا ممكن الآن كما يتضح في الإجابات الأخرى.

لا توجد طريقة لتعديل URL في المتصفح دون إعادة تحميل الصفحة. يمثل عنوان URL ما كانت عليه آخر صفحة تم تحميلها. إذا قمت بتغييره (document.location) ثم سوف إعادة تحميل الصفحة.

أحد الأسباب الواضحة هو أن تكتب موقعًا على www.mysite.com هذا يبدو وكأنه صفحة تسجيل الدخول إلى البنك. ثم تقوم بتغيير شريط عنوان URL للمتصفح ليقول www.mybank.com. سيكون المستخدم غير مدرك تمامًا أنهم ينظرون إليه حقًا www.mysite.com.

Answer 5

parent.location.hash = "hello";

Answer 6

إليكم الحل (Newurl هو عنوان URL الجديد الذي تريد استبداله بالذات الحالية):

history.pushState({}, null, newUrl);

Answer 7

HTML5 Relacestate هو الجواب ، كما سبق ذكره Vivart و Geo1701. ومع ذلك ، لا يتم دعمه في جميع المتصفحات/الإصدارات.History.JS يلتف ميزات الحالة HTML5 ويوفر دعمًا إضافيًا لمتصفحات HTML4.

Answer 8

في الحديث المتصفحات و HTML5, ، هناك طريقة تسمى pushState على النافذة history. سيؤدي ذلك إلى تغيير عنوان URL ودفعه إلى السجل دون تحميل الصفحة.

يمكنك استخدامه مثل هذا ، سوف يستغرق 3 معلمات ، 1) كائن الحالة 2) العنوان وعنوان URL):

window.history.pushState({page: "another"}, "another page", "example.html");

سيؤدي هذا إلى تغيير عنوان URL ، ولكن ليس إعادة تحميل الصفحة. أيضًا ، لا تتحقق مما إذا كانت الصفحة موجودة ، لذلك إذا قمت ببعض رمز JavaScript الذي يتفاعل مع عنوان URL ، فيمكنك العمل معهم مثل هذا.

أيضا هناك history.replaceState() وهو ما يفعل نفس الشيء بالضبط ، إلا أنه سيعدل التاريخ الحالي بدلاً من إنشاء تاريخ جديد!

كما يمكنك إنشاء وظيفة للتحقق من ما إذا history.pushState موجود ، ثم استمر مع الباقي مثل هذا:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

كما يمكنك تغيير # إلى عن على <HTML5 browsers, والتي لن إعادة تحميل الصفحة. هذه هي الطريقة التي يستخدمها الزاوي للقيام بها منتجع صحي حسب الهاشتاج ...

التغيير # من السهل جدًا ، مثل:

window.location.hash = "example";

ويمكنك اكتشافها مثل هذا:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

Answer 9

قبل HTML5 يمكننا استخدام:

parent.location.hash = "hello";

و:

window.location.replace("http:www.example.com");

ستعمل هذه الطريقة على إعادة تحميل صفحتك ، لكن HTML5 قدمت history.pushState(page, caption, replace_url) هذا لا ينبغي إعادة تحميل صفحتك.

Answer 10

إذا كان ما تحاول القيام به هو السماح للمستخدمين بوضع إشارة مرجعية/مشاركة الصفحات ، ولا تحتاج إلى أن يكون عنوان URL الصحيح تمامًا ، ولا تستخدم مراسي التجزئة لأي شيء آخر ، ثم يمكنك القيام بذلك في اثنين القطع؛ يمكنك استخدام الموقع. hash تمت مناقشته أعلاه ، ثم تنفيذ فحص على الصفحة الرئيسية ، للبحث عن عنوان URL مع مرساة التجزئة فيه ، وإعادة توجيهك إلى النتيجة اللاحقة.

على سبيل المثال:

1) المستخدم على www.site.com/section/page/4

2) المستخدم يقوم ببعض الإجراءات التي تغير عنوان URL إلى www.site.com/#/section/page/6 (مع التجزئة). لنفترض أنك قمت بتحميل المحتوى الصحيح للصفحة 6 في الصفحة ، لذلك بصرف النظر عن التجزئة ، فإن المستخدم ليس منزعجًا جدًا.

3) يمرر المستخدم عنوان URL هذا إلى شخص آخر ، أو يشرحه

4) يذهب شخص آخر ، أو نفس المستخدم في وقت لاحق www.site.com/#/section/page/6

5) رمز على www.site.com/ يعيد توجيه المستخدم إلى www.site.com/section/page/6, ، باستخدام شيء مثل هذا:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

أتمنى أن يكون هذا منطقيًا! إنه نهج مفيد لبعض المواقف.

Answer 11

أي تغييرات في الموقع (إما window.location أو document.location) سوف يتسبب في طلب على عنوان URL الجديد ، إذا لم تكن فقط تغيير جزء عنوان URL. إذا قمت بتغيير عنوان URL ، يمكنك تغيير عنوان URL.

استخدم تقنيات إعادة كتابة عنوان URL من جانب الخادم مثل Apache Mod_Rewrite إذا كنت لا تحب عناوين URL التي تستخدمها حاليًا.

Answer 12

فيما يلي الوظيفة لتغيير عنوان URL دون إعادة تحميل الصفحة. يتم دعمه فقط لـ HTML5.

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

Answer 13

يمكنك إضافة علامات المرساة. أنا أستخدم هذا على موقعي http://www.piano-chords.net/ حتى أتمكن من تتبع Google Analytics ما يزوره الأشخاص على الصفحة.

أنا فقط أضف علامة مرساة ثم جزء من الصفحة التي أريد تتبعها:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

Answer 14

كما أشار من قبل توماس Stjernegaard Jeppesen ، يمكنك استخدام History.JS لتعديل معلمات URL بينما يتنقل المستخدم من خلال روابط AJAX وتطبيقاتك.

لقد مر ما يقرب من عام منذ هذه الإجابة ، ونما History.js وأصبحت أكثر استقرارًا ومتصفحًا. الآن يمكن استخدامه لإدارة حالات التاريخ في HTML5 متوافقة وكذلك في العديد من المتصفحات HTML4 فقط. في هذا العرض التوضيحي يمكنك رؤية مثال على كيفية عمله (وكذلك القدرة على تجربة وظائفه وحدوده.

إذا كنت بحاجة إلى أي مساعدة في كيفية استخدام هذه المكتبة وتنفيذها ، أقترح عليك إلقاء نظرة على الكود المصدري للصفحة التجريبية: سترى أنه من السهل جدًا القيام به.

أخيرًا ، للحصول على شرح شامل لما يمكن أن يكون المشكلات المتعلقة باستخدام التجزئة (و Hashbangs) ، تحقق من هذا الرابط بقلم بنيامين لوبتون.

Answer 15

يستخدم history.pushState() من HTML 5 التاريخ API.

الرجوع إلى HTML5 التاريخ API لمزيد من التفاصيل.

Answer 16

يستخدم:

    let stateObject = { foo: "bar" };
    history.pushState(stateObject, "page 2", "newpage.html");

يمكنك رؤيته في منشور المدونة تحديث عنوان URL للمتصفح دون إعادة تحميل الصفحة.

Answer 17

يستخدم window.history.pushState("object or string", "Title", "/new-url"), ، لكنه سيظل يرسل طلب URL جديد إلى الخادم.

Answer 18

على افتراض أنك لا تحاول القيام بشيء خبيث ، يمكن أن يتم سرد أي شيء تريده htaccess.