معالجة InnerHTML في JavaScript

Question

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

container.innerHTML = content;

في بعض الأحيان يتعين علي الكتابة فوق بعض المحتوى السابق في هذه العقدة.يعمل هذا بشكل جيد، حتى يحدث أن المحتوى السابق احتل مساحة عمودية أكبر من المحتوى الجديد الذي يشغله وقام المستخدم بتمرير الصفحة لأسفل - تم التمرير أكثر مما يسمح به المحتوى الجديد، بشرط ارتفاعه.

في هذه الحالة، يتم إعادة رسم الصفحة بشكل غير صحيح - تبقى بعض العناصر من المحتوى القديم.إنه يعمل بشكل جيد، بل إنه من الممكن التخلص من العناصر، عن طريق تصغير المتصفح واستعادته (أو فرض إعادة رسم النافذة بطريقة أخرى)، ولكن هذا لا يبدو مريحًا للغاية.

أقوم باختبار هذا فقط ضمن Safari (هذا موقع ويب مُحسّن لجهاز iPhone).

هل لدى أي شخص فكرة عن كيفية التعامل مع هذا؟

Answer 1

الحل الأسهل الذي وجدته هو وضع علامة ربط <a> في الجزء العلوي من div أنت تقوم بتحرير:

<a name="ajax-div"></a>

ثم عند تغيير محتوى div, ، يمكنك القيام بذلك لجعل المتصفح ينتقل إلى علامة الربط الخاصة بك:

location.hash = 'ajax-div';

استخدم هذا للتأكد من عدم قيام المستخدم بالتمرير لأسفل كثيرًا عند تحديث المحتوى ومن المفترض ألا تواجه المشكلة في المقام الأول.

(تم اختباره في أحدث إصدار تجريبي من FF وأحدث رحلات السفاري)

Answer 2

يبدو أن محرك عرض webkit الخاص بـ Safari لم يتعرف في البداية على تغيير المحتوى، على الأقل ليس بشكل كامل لإزالة محتوى html السابق.يؤدي تصغير النوافذ ثم استعادتها إلى بدء حدث إعادة رسم في محرك العرض الخاص بالمتصفح.

أعتقد أنني سأستكشف طريقين:هل يمكنني أولاً استخدام إطار iframe بدلاً من عقدة "المحتوى" الحالية؟تتوقع المتصفحات أن تتغير إطارات IFram، ولكن كما ترى، فهي ليست جيدة دائمًا في تغيير محتوى DIV أو العناصر الأخرى.

ثانيًا، ربما عن طريق تعديل موضع التمرير كما اقترح سابقًا.يمكنك ببساطة تحريك التمرير مرة أخرى إلى 0 كما هو مقترح أو إذا كان ذلك مزعجًا، فيمكنك محاولة استعادة التمرير بعد تغيير المحتوى.اطرح ارتفاع عقدة المحتوى القديمة من موضع التمرير الحالي (إعادة تعيين تمرير المتصفح إلى 0 لعقدة المحتوى)، وقم بتغيير محتوى العقدة، ثم أضف ارتفاع العقدة الجديدة إلى موضع التمرير.

Palehorse على حق (لا يمكنني التصويت على إجابته في الوقت الحالي - لا توجد نقاط) يمكن لمكتبة تجريدية مثل jQuery أو Dojo أو حتى Prototype أن تساعد في كثير من الأحيان في هذه الأمور.خاصة إذا رأيت صفحتك/موقعك يتحرك إلى ما هو أبعد من معالجة DOM البسيطة، فستجد الأدوات والتحسينات التي توفرها المكتبات بمثابة مساعدة كبيرة.

Answer 3

يبدو أن لديك مشكلة في المتصفح نفسه.هل هذه المشكلة تحدث في متصفح واحد فقط؟

شيء واحد يمكنك تجربته هو استخدام مكتبة خفيفة الوزن مثل مسج.إنه يتعامل مع اختلافات المتصفح بشكل جيد إلى حد ما.لتعيين HTML الداخلي لـ div بمعرف حاوية يمكنك ببساطة كتابة هذا:

$('#container').html( content );

سيعمل ذلك في معظم المتصفحات.لا أعرف ما إذا كان سيحل مشكلتك على وجه التحديد أم لا ولكن قد يكون الأمر يستحق المحاولة.

Answer 4

هل من الممكن ضبط موضع التمرير مرة أخرى إلى الأعلى (element.scrollTop = 0;element.scrollLeft = 0;عن ظهر قلب) قبل استبدال المحتوى؟

Answer 5

اضبط ارتفاع CSS للعنصر على "تلقائي" في كل مرة تقوم فيها بتحديث InternalHTML.

Answer 6

سأحاول القيام بـ Container.innerHTML = '';حاوية.innerHTML = المحتوى؛