إلحاق صفحة ويب في جافا سكريبت

Question

ما أريد فعله هو: صفحة ويب مع تحديث المحتوى باستمرار. (في حالتي يتم تحديث كل 2 ثانية) يتم إلحاق محتوى جديد بالمحتوى القديم بدلاً من الكتابة فوق.

هنا هو الرمز الذي لدي:

var msg_list = new Array(
    "<message>Hello, Clare</message>", "<message>Hello,Lily</message>",
    "<message>Hello, Kevin</message>", "<message>Hello, Bill</message>"
);
var number = 0;
function send_msg()
{
 document.write(number + " " + msg_list[number%4]+'<br/>');
 number = number + 1;
}
var my_interval = setInterval('send_msg()', 2000); 

ومع ذلك ، في كل من IE و Firefox ، تتم طباعة سطر واحد فقط ، ولن يتم تحديث الصفحة بعد الآن. ومن المثير للاهتمام في Chrome ، يتم طباعة الخطوط بشكل مستمر ، وهو ما أبحث عنه.

أعلم أن المستند. write () يتم استدعاؤه عند تحميل الصفحة وفقًا لـ هذا الرابط. لذلك فهي بالتأكيد ليست الطريقة لتحديث صفحة الويب بشكل مستمر. ما هي أفضل طريقة لتحقيق ما أريد أن أفعله؟

مبتدئ تماما في جافا سكريبت. شكرًا لك.

زنبق

Answer 1

يمكنك إلحاق innerHTML منشأه:

var number = 0;
function send_msg()
{
    document.getElementById('console').innerHTML += (number + " " + msg_list[number%4]+'<br/>');
    number = number + 1;
}

سيقوم هذا الرمز بإلحاق الرسالة بعنصر مع معرف من console, ، مثل

<div id="console"></div>

بالمناسبة ، من الممارسات السيئة الاتصال setInterval مع سلسلة.

بدلاً من ذلك ، تمرير الوظيفة نفسها ، مثل هذا:

var my_interval = setInterval(send_msg, 2000); 

Answer 2

أود أن أبدأ بالنظر إلى مكتبة jQuery. هذا سوف يوفر لك الكثير من الألم.

ما تريد القيام به هو الاحتفاظ بخطوط مدرجة في جدول ، باستخدام مثل:

$('table tbody').append('<tr><td>some value</td></tr>');

Answer 3

سيكون لدي div أو حاوية أخرى ، مثل هذا:

<div id="msgDiv"></div>

ثم اكتب إليها مثل استخدام .innerHTML, ، مثله:

var msg_list = new Array(
    "<message>Hello, Clare</message>", "<message>Hello,Lily</message>",
    "<message>Hello, Kevin</message>", "<message>Hello, Bill</message>"
);
var number = 0;
function send_msg()
{
    document.getElementById("msgDiv").innerHTML += number + " " + msg_list[number%4]+'<br/>';
    number++;
}
var my_interval = setInterval(send_msg, 2000); 

يمكنك رؤية مثال عاملة على هذا هنا

Answer 4

ستكون هذه فرصة ممتازة لك لتعلم القليل من برمجة DOM.

يجب أن يؤدي استخدام DOM لتحديث الصفحة إلى أقل من مجرد تسلسل المزيد من HTML فيه. ابحث عن العقدة التي تريد وضع التحديثات فيها ، وقم بإجراء التذييل على كل إضافة لاحقة.

Answer 5

قد تكون الإجابات على هذا السؤال مفيدة: ما هي الطريقة البسيطة لتشكيل الخفيون في سطر الأوامر الخاص بي؟