لطالما كان توافق JavaScript مشكلة رئيسية لمطوري الويب. تسببت الاختلافات بين المواصفات الرسمية والمعايير الواقعية والتطبيقات المختلفة في تعاني العديد من المطورين ليلًا ونهارًا. تحقيقًا لهذه الغاية ، يتم تلخيص توافق JavaScript لـ IE و Firefox بشكل رئيسي من الاختلافات التالية:
نسخة الكود كما يلي:
1. الاختلافات بين الوظائف والأساليب ؛
2. النمط الوصول والإعدادات ؛
3. طريقة دوم ومرجع الكائن ؛
4. التعامل مع الأحداث ؛
5. علاج التوافق للاختلافات الأخرى.
1. الاختلافات بين الوظائف والطرق
1. طريقة getyear ()
[تعليمات التحليل] دعونا نلقي نظرة على الكود التالي:
نسخة الكود كما يلي:
var year = new date (). getyear () ؛
document.write (سنة) ؛
التاريخ الذي تحصل فيه في IE هو "2010" ، والتاريخ الذي تراه في Firefox هو "110" ، ويرجع ذلك أساسًا إلى إرجاع Firefox getyear قيمة "العام الحالي-1900".
【معالجة التوافق】 أضف إلى القاضي العام ، مثل:
نسخة الكود كما يلي:
var year = new date (). getyear () ؛
السنة = (السنة <1900؟ (1900+سنة): السنة) ؛
document.write (سنة) ؛
يمكنك أيضًا تسميتها من خلال GetTlyarerly Getutcyarry:
نسخة الكود كما يلي:
var year = new date (). getLyear () ؛
document.write (سنة) ؛
2. eval () وظيفة
[ملاحظة تحليل] في IE ، يمكنك استخدام eval ("idname") أو getElementById ("idname") للحصول على كائنات HTML مع idname ؛ في Firefox ، يمكنك فقط استخدام GetElementById ("idname") للحصول على كائنات HTML باستخدام idname.
[معالجة التوافق] استخدم getElementById ("idname") للحصول على كائن HTML مع idname مع idname.
3. بيان const
[ملاحظة التحليل] لا يمكن استخدام الكلمة الرئيسية const في IE. يحب:
نسخة الكود كما يلي:
const constvar = 32 ؛
في IE هذا خطأ في بناء الجملة.
【المعالجة المتوافقة】 لا تستخدم const ، استخدم var بدلاً من ذلك.
4. var
[تعليمات التحليل] يرجى الاطلاع على الرمز التالي:
نسخة الكود كما يلي:
echo = function (str) {
document.write (str) ؛
}
تعمل هذه الوظيفة بشكل طبيعي على IE ، ولكن تم الإبلاغ عن خطأ تحت Firefox.
[معالجة متوافقة] من الطبيعي إضافة VAR قبل الصدى ، وهذا هو الغرض من ذكرنا لـ VAR.
5. قضية const
[ملاحظة التحليل] لا يمكن استخدام الكلمة الرئيسية const في IE. على سبيل المثال ، const constvar = 32 ؛ في IE هذا خطأ في بناء الجملة.
【الحل】 لا تستخدم const ، استخدم var بدلاً من ذلك.
2. الوصول إلى النمط والإعدادات
1. سمة "تعويم" من CSS
[ملاحظة التحليل] بناء الجملة الأساسي لـ JavaScript للوصول إلى قيمة CSS معينة هو: Object.Style.Property ، لكن بعض خصائص CSS هي نفسها أسماء الكلمات المحجوزة في JavaScript ، مثل "Float" ، "for" ، "Class" ، وما إلى ذلك ، وتختلف طرق الكتابة عن المطورات المختلفة.
في IE ، اكتب هذا:
نسخة الكود كما يلي:
document.getElementById ("header"). style.stylefloat = "left" ؛
في Firefox ، اكتب هذا:
نسخة الكود كما يلي:
document.getElementById ("header"). style.cssfloat = "left" ؛
[معالجة التوافق] أضف حكمًا قبل الكتابة لتحديد ما إذا كان المتصفح هو:
نسخة الكود كما يلي:
if (document.all) {//
document.getElementById ("header"). style.stylefloat = "left" ؛
}
آخر {// غير محدد عندما لا يكون IE
document.getElementById ("header"). style.cssfloat = "left" ؛
}
2. الوصول "لـ" في علامة <blabe>
[تحليل التحليل] مثل سمة "Float" ، فإنه يتطلب أيضًا استخدام تمييز بناء الجملة غير المرئي للوصول إلى "في علامة <blabel>.
في IE ، اكتب هذا:
نسخة الكود كما يلي:
var myobject = document.getElementById ("mylabel") ؛
var myattribute = myobject.getAttribute ("htmlfor") ؛
في Firefox ، اكتب هذا:
نسخة الكود كما يلي:
var myobject = document.getElementById ("mylabel") ؛
var myattribute = myobject.getAttribute ("for") ؛
[معالجة التوافق] الحل هو تحديد نوع المتصفح أولاً.
3. الوصول وضبط خصائص الفئة
[ملاحظة التحليل] أيضًا لأن الفصل عبارة عن كلمات محفوظة JavaScript ، يستخدم هذان المتصفحان طرق JavaScript المختلفة للحصول على هذه الخاصية.
كيف تكتب جميع إصدارات IE قبل IE8.0:
نسخة الكود كما يلي:
var myobject = document.getElementById ("header") ؛
var myattribute = myobject.getAttribute ("className") ؛
ينطبق على IE8.0 وكتابة Firefox:
نسخة الكود كما يلي:
var myobject = document.getElementById ("header") ؛
var myattribute = myobject.getAttribute ("class") ؛
بالإضافة إلى ذلك ، عند تعيين سمة الفئة باستخدام setAttribute () ، فإن المتصفحين أيضًا لهما نفس الاختلاف.
نسخة الكود كما يلي:
setAttribute ("className" ، value) ؛
طريقة الكتابة هذه قابلة للتطبيق على جميع إصدارات IE قبل IE8.0. ملاحظة: لا يدعم IE8.0 سمة "className".
setAttribute ("class" ، value) ؛ مناسب لـ IE8.0 و Firefox.
【معالجة متوافقة】
الطريقة 1 ، اكتب كلاهما:
نسخة الكود كما يلي:
var myobject = document.getElementById ("header") ؛
myobject.setattribute ("class" ، "classValue") ؛
myobject.setattribute ("className" ، "classValue") ؛
// اضبط فئة الرأس على ClassValue
الطريقة 2: IE و FF دعم كائن
نسخة الكود كما يلي:
var myobject = document.getElementById ("header") ؛
myobject.classname = "classValue" ؛ // اضبط فئة الرأس على ClassValue
الطريقة 3: احكم أولاً على نوع المتصفح ، ثم استخدم طريقة الكتابة المقابلة وفقًا لنوع المتصفح.
4. عرض الكائن ومشكلة تعيين الارتفاع
[ملاحظة التحليل] البيان المشابه لـ OBJ.Style.Height = imgobj.height في Firefox غير صالح.
【المعالجة المتوافقة】 استخدم obj.style.height = imgobj.height + 'px' ؛
5. إضافة أنماط
[ملاحظة التحليل] في IE ، استخدم طريقة addrule () لإضافة أنماط ، مثل: stylesheet.addrule ("P" ، "Color: #CCC" ، STYLESHEET.LENGTH). ومع ذلك ، فإن هذه الطريقة غير متوافقة مع FF ، واستخدم طريقة Insetrule () لاستبدالها في FF. مثل STYLESHEET.INSERTRULE ("P {color: #ccc}" ، stylesheet.length).
【معالجة متوافقة】
نسخة الكود كما يلي:
if (STYLESHEET.INSERTRULE) {
// esertrule () طريقة
}آخر{
// طريقة addrule ()
}
6. النمط النهائي
[ملاحظة التحليل] ستفشل في بعض الأحيان أنماطنا المخصصة لأن تداخل الأنماط يحدث ، مثل النمط المحدد بواسطة محدد الفئة والأناقة المحددة بواسطة محدد الملصقات ، والأخير غير صالح في هذا الوقت. ثم يجب استخدام النمط النهائي. يتم كتابة النمط النهائي في IE كـ ele.currentStyle. اسم السمة. طريقة الكتابة القياسية في DOM هي استخدام كائن document.defaultView ، مثل document.defaultView.getComputedStyle (Elel ، Null) ، وهو متوافق مع FF.
[معالجة التوافق] أولاً الحكم على المتصفح (document.all) ، ثم قم بتنفيذ الطريقة أعلاه.
3. طريقة DOM ومرجع الكائن
1. getElementByid
[تعليمات التحليل] دعونا نلقي نظرة على مجموعة من الرموز:
<!-إدخال كائن الوصول 1->
نسخة الكود كما يلي:
<input id = "id" type = "button"
value = "Click Me" ōnclick = "Alert (id.value)"/>
في Firefox ، لا يستجيب الزر ، في IE ، هذا على ما يرام ، لأنه يمكن استخدام معرف عنصر HTML مباشرة كاسم متغير في البرنامج النصي ، ولكن ليس في Firefox.
[معالجة التوافق] حاول استخدام كتابة W3C DOM. عند الوصول إلى الكائنات ، استخدم document.getElementById ("id") للوصول إلى الكائن بالمعرف ، ويجب أن يكون المعرف فريدًا في الصفحة. أيضًا ، عند الوصول إلى الكائنات باسم علامة ، استخدم document.getElementsByTagName ("div") [0]. هذه الطريقة مدعومة بمزيد من المتصفحات.
<!-إدخال كائن الوصول 2->
نسخة الكود كما يلي:
<input id = "id" type = "button" value = "Click Me"
OnClick = "ALERT (document.getElementById ('id'). value)" />
2. الوصول إلى كائن فئة المجموعة
[ملاحظة تحليل] تحت IE ، يمكنك استخدام () أو [] للحصول على كائن فئة المجموعة ؛ تحت Firefox ، يمكنك فقط استخدام [] للحصول على كائن فئة التجميع. يحب:
document.write (document.forms ("formName"). src) ؛
// يمكن أن تصل طريقة الكتابة هذه إلى سمة SCRC لكائن النموذج تحت أي
【معالجة التوافق】 تغيير المستند. استخدم [] للحصول على كائنات فئة التجميع بطريقة موحدة.
3. مرجع الإطار
[ملاحظة التحليل] IE يمكن الوصول إلى كائن النافذة المقابل لهذا الإطار من خلال المعرف أو الاسم ، بينما يمكن لـ Firefox الوصول فقط إلى كائن النافذة المقابل لهذا الإطار من خلال الاسم.
على سبيل المثال ، إذا تم كتابة علامة الإطار أعلاه في HTM في النافذة العلوية ، فيمكنك الوصول إليها مثل هذا:
IE: window.top.frameid أو window.top.framename للوصول إلى كائن النافذة هذا ؛
Firefox: فقط window.top.framename يمكن استخدامها للوصول إلى كائن النافذة هذا.
【المعالجة المتوافقة】 استخدم اسم الإطار للوصول إلى كائنات الإطار. بالإضافة إلى ذلك ، يمكن استخدام كل من IE و Firefox
window.document.getElementById ("FrameId") للوصول إلى كائن الإطار هذا.
4. الوالدين
[وصف التحليل] IE يدعم استخدام ParentElement و ParentNode للحصول على العقد الأصل. يمكن لـ Firefox استخدام ParentNode فقط.
[معالجة التوافق] لأن كل من Firefox و IE دعم DOM ، يتم استخدام ParentNode للوصول إلى العقدة الأصل.
5. تشغيل الجدول
[ملاحظة التحليل] في الجدول تحت IE ، سواء تم إدخاله باستخدام InnerHTML أو AppendChild ، فهو ليس له أي تأثير ، لكن المتصفحات الأخرى تعرضها بشكل طبيعي.
[المعالجة المتوافقة] الحل هو إضافة <tr> إلى عنصر <Tbody> للجدول ، كما هو موضح أدناه:
نسخة الكود كما يلي:
var row = document.createElement ("tr") ؛
var cell = document.createElement ("td") ؛
var cell_text = document.createTextNode ("محتوى إدراج") ؛
cell.appendchild (cell_text) ؛
row.appendchild (Cell) ؛
document.getElementsByTagName ("tbody") [0] .AppendChild (row) ؛
6. إزالة العقد Removenode () و removechild ()
[ملاحظة التحليل] يمكن استخدام AppendNode بشكل طبيعي في IE و Firefox ، ولكن لا يمكن استخدام Removenode إلا في IE.
تتمثل وظيفة طريقة Removenode في حذف العقدة ، مع بناء الجملة كونها node.removenode (خطأ) أو node.removenode (صواب) ، وقيمة الإرجاع هي العقدة المحذوفة.
Removenode (خطأ) يعني أنه يتم حذف العقدة المحددة فقط ، ثم يتم الترويج للعقدة الطفل الأصلية لهذه العقدة إلى عقدة الطفل الأصلية.
Removenode (صواب) يعني حذف العقدة المحددة وجميع العقد المرؤوس. تصبح العقدة المحذوفة عقدة يتيمة ولم تعد لها عقدة طفل وعقدة أولية.
[معالجة التوافق] لا تحتوي العقد في Firefox على طريقة Removenode ، بحيث لا يمكن استبدالها إلا بطريقة الإزالة. ارجع أولاً إلى العقدة الأصل وإزالة العقدة المراد إزالتها من العقدة الأصل.
node.parentnode.removechild (العقدة) ؛
// من أجل استخدام كل من IE و Firefox بشكل طبيعي ، خذ العقدة الأصل للطبقة السابقة ثم إزالة.
7. العقد التي تم الحصول عليها بواسطة idevenodes
[ملاحظة التحليل] معنى ترجمة الأطفال يختلف في IE و Firefox. لنلقي نظرة على الكود التالي:
نسخة الكود كما يلي:
<ul id = "main">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<type type = button value = "انقر لي!" onclick =
"Alert (document.getElementById ('main'). childnodes.length)">
الجري مع IE و Firefox على التوالي ، نتيجة IE هي 3 ، في حين أن Firefox هو 7. يستخدم Firefox مواصفات DOM ، وسيعني "#Text" النص (في الواقع مساحات لا معنى لها وفواصل الخط ، وما إلى ذلك) سوف يتم تحليلها في عقدة في Firefox. في IE ، سيتم تحليل النص الوحيد ذو المعنى العملي إلى "#Text".
【معالجة متوافقة】
الطريقة 1: عند الحصول على العقد الفرعية ، يمكنك تجنب هذه المشكلة بواسطة node.getElementsByTagName (). ومع ذلك ، من الواضح أن GetElementsByTagname ليس جيدًا مثل استخدام الأطفال لاجتياز هياكل DOM المعقدة ، لأن الأطفال يمكنهم التعامل بشكل أفضل مع التسلسل الهرمي DOM.
الطريقة 2. في الاستخدام الفعلي ، عند عبور العقد الفرعية Firefox ، يمكنك أيضًا إضافتها إلى الحلقة:
إذا (childnode.nodename == "#text") متابعة ؛ // أو استخدم nodetype == 1.
هذا يسمح لك بتخطي بعض العقد النصية.
مزيد من القراءة
"الفرق بين الأطفال في IE و Firefox"
8. لا يمكن لـ Firefox دعم النص الداخلي
[Note analysis] لا يدعم Firefox النص الداخلي ، فهو يدعم TextContent لتنفيذ النص الداخلي ، لكن TextContent لا يعتبر عناصر مثل النص الداخلي ، لذلك لا يتوافق تمامًا مع IE. إذا لم تستخدم TextContent ، فإن السلسلة لا تحتوي على رمز HTML ، والذي يمكن استبداله أيضًا بـ InnerHTML. يمكنك أيضًا كتابة طريقة لتنفيذها ، يرجى الرجوع إلى المقالة "تنفيذ سمة النص الداخلي لـ Firefox".
【قارن المعالجة】 مقارنة بالحكم على نوع المتصفح:
نسخة الكود كما يلي:
if (document.all) {
document.getElementById ('element'). innertext = "my text" ؛
} آخر{
document.getElementById ('element'). TextContent = "text my my text" ؛
}
4. التعامل مع الأحداث
إذا كانت معالجة الأحداث متورطة عند استخدام JavaScript ، فأنت بحاجة إلى معرفة الاختلافات بين الأحداث في المتصفحات المختلفة. هناك ثلاثة طرز أحداث JavaScript الرئيسية (انظر "دعم ثلاثة نماذج أحداث في وقت واحد" ، وهي NN4 و IE4+ و W3C/Safar.
1. Window.Event
【تعليمات التحليل】 انظر إلى قطعة من الكود أولاً
نسخة الكود كما يلي:
وظيفة et ()
{
تنبيه (حدث) ؛ // أي: [كائن]
}
نتيجة الكود أعلاه الذي يعمل في IE هو [كائن] ، ولكن لا يمكن تشغيله في Firefox.
نظرًا لأنه يمكن استخدام الحدث مباشرةً كخاصية لكائن نافذة في IE ، ولكن في Firefox ، يتم استخدام نموذج W3C ، والذي ينتشر الأحداث من خلال طريقة تمرير المعلمات ، أي أنك تحتاج إلى توفير واجهة استجابة للحدث لوظائفك.
[معالجة التوافق] أضف حكم الحدث والحصول على الحدث الصحيح وفقًا للمتصفح:
نسخة الكود كما يلي:
وظيفة et ()
{
evt = evt؟ evt: (window.event؟ window.event: null) ؛
// متوافق مع IE و Firefox
تنبيه (EVT) ؛
}
2. اكتساب قيمة لوحة المفاتيح
[ملاحظة التحليل] تختلف طرق الحصول على قيم لوحة المفاتيح من IE و Firefox. يمكن أن يُفهم أن الحدث. الذي تحت إشراف Firefox يعادل الحدث. keycode تحت IE. للاختلافات لبعضنا البعض ، يرجى الرجوع إلى "اختبار التوافق مع رمز المفاتيح ، وهو و charcode في أحداث لوحة المفاتيح"
【معالجة متوافقة】
نسخة الكود كما يلي:
وظيفة mykeypress (evt) {
// متوافق مع IE و Firefox للحصول على كائن لوحة المفاتيح
EVT = (EVT)؟ evt: ((window.event)؟ window.event: "")
// متوافق مع IE و Firefox للحصول على القيمة الرئيسية لكائن لوحة المفاتيح
var key = evt.keycode؟ evt.keycode: evt.hich ؛
if (evt.ctrlkey && (key == 13 || key == 10)) {
// تم الضغط على Ctrl والدخول في نفس الوقت
// افعل شيئًا ؛
}
}
3. الحصول على مصدر الحدث
[ملاحظة التحليل] عند استخدام مندوبي الأحداث ، يمكننا تحديد العنصر الذي يأتي من خلال اكتساب مصدر الحدث. ومع ذلك ، في IE ، يحتوي كائن الحدث على خاصية srcelement ، ولكن لا يوجد خاصية مستهدفة ؛ في Firefox ، يحتوي الكائن حتى على خاصية مستهدفة ، ولكن لا يوجد خاصية srcelement.
【معالجة متوافقة】
نسخة الكود كما يلي:
eLe = function (evt) {// التقاط الكائن الذي يتصرف الحدث الحالي
evt = evt || window.event ؛
يعود
(obj = event.srcelement؟ event.srcelement: event.target ؛) ؛
}
4. مراقبة الأحداث
[ملاحظة التحليل] من حيث الاستماع إلى الحدث ومعالجته ، يوفر أي اثنين واجهتين: AttachEvent و Detachevent ، بينما يوفر Firefox AddeventListener و RemoveEventListener.
[معالجة التوافق] أبسط معالجة التوافق هي تغليف هاتين المجموعتين من الواجهات:
نسخة الكود كما يلي:
وظيفة AddEvent (Elem ، eventName ، Handler) {
if (elem.attachevent) {
elem.attachevent ("on" + eventName ، function () {
Handler.Call (elem)}) ؛
// استخدم استدعاء وظيفة رد الاتصال () هنا ، دع هذه النقطة إلى Elem
} آخر إذا (elem.addeventListener) {
elem.addeventListener (eventName ، Handler ، false) ؛
}
}
وظيفة إزالة (elem ، eventName ، Handler) {
if (elem.detachevent) {
elem.detachevent ("on" + eventName ، function () {
Handler.Call (elem)}) ؛
// استخدم استدعاء وظيفة رد الاتصال () هنا ، دع هذه النقطة إلى Elem
} آخر إذا (elem.removeeventListener) {
elem.RemoveEventListener (eventName ، Handler ، false) ؛
}
}
تجدر الإشارة إلى أنه بموجب Firefox ، يشير هذا في وظيفة معالجة الأحداث إلى العنصر المستمع نفسه ، ولكن في IE ، يمكنك استخدام استدعاء وظيفة رد الاتصال للسماح للسياق الحالي يشير إلى العنصر المستمع.
5. موقف الماوس
[ملاحظة التحليل] تحت IE ، يحتوي الكائن الزوجي على سمات X و Y ، ولكن لا توجد سمات Pagex و Pagey ؛ تحت Firefox ، يحتوي الكائن الزوجي على سمات pagex و pagey ، ولكن لا توجد سمات x و y.
[معالجة التوافق] استخدم MX (MX = Event.x؟ يجب النظر في الموقف المطلق في نقاط معقدة
نسخة الكود كما يلي:
وظيفة getabspoint (e) {
var x = e.offsetleft ، y = e.offsettop ؛
بينما (e = e.offsetParent) {
x += e.offsetLeft ؛
y += e.offsettop ؛
}
ALERT ("X:" + X + "،" + "y:" + y) ؛
}
5. علاج التوافق للاختلافات الأخرى
1. xmlhttprequest
[ملاحظة تحليل] جديد ActivexObject ("Microsoft.xmlhttp") ؛ يعمل فقط في IE. Firefox لا يدعمه ، ولكنه يدعم XMLHTTPrequest.
【معالجة متوافقة】
نسخة الكود كما يلي:
وظيفة Createxhr () {
var xhr = null ؛
if (window.xmlhttprequest) {
XHR = جديد ActiveXObject ("msxml2.xmlhttp") ؛
}آخر{
يحاول {
XHR = جديد ActiveXObject ("Microsoft.xmlHttp") ؛
}
يمسك() {
XHR = NULL ؛
}
}
إذا (! XHR) العودة ؛
إرجاع XHR ؛
}
2. نوافذ مشروطة وغير الوسائط
[ملاحظة التحليل] في IE ، يمكن فتح النوافذ المشروطة وغير الوسائط من خلال showmodaldialog و showmodlessdialog ، ولكن Firefox لا يدعمهم.
[Solution] استخدم Window.Open (pageurl ، الاسم ، المعلمات) لفتح نافذة جديدة. إذا كنت بحاجة إلى تمرير المعلمات ، فيمكنك استخدام الإطار أو iframe.
3. input.type مشكلة السمة
خاصية input.type تحت IE هي للقراءة فقط ، ولكن يمكن تعديلها تحت Firefox.
4. تشغيل الخيار على عنصر تحديد
تعيين الخيارات ، IE و Firefox مكتوبة بشكل مختلف:
Firefox: يمكن ضبطها مباشرة
نسخة الكود كما يلي:
Option.text = 'fooooooooo' ؛
IE: تعيين فقط
نسخة الكود كما يلي:
Option.innerhtml = 'fooooooo' ؛
طريقة لحذف خيار تحديد:
Firefox: نعم
نسخة الكود كما يلي:
select.options.remove (selectIndex) ؛
IE7: يمكن استخدامها
نسخة الكود كما يلي:
select.options [i] = null ؛
IE6: بحاجة إلى الكتابة
نسخة الكود كما يلي:
select.options [i] .outerhtml = null ؛
5. تحليل كائنات IMG ALT والعنوان
[ملاحظة التحليل] يحتوي كائن IMG على سمتين: Alt and Title. الفرق هو أن ALT: مطالبة عندما تكون الصورة غير موجودة أو أن الحمل غير صحيح.
العنوان: وصف نصيحة للصورة. إذا لم يتم تعريف العنوان في IE ، فيمكن أيضًا استخدام ALT كأفضل لـ IMG ، ولكن في Firefox ، يتم استخدام كلاهما تمامًا وفقًا للتعريف في المعيار.
عند تحديد كائن IMG.
[معالجة متوافقة] من الأفضل كتابة جميع كائنات ALT والعنوان لضمان استخدامها بشكل طبيعي في المتصفحات المختلفة.
6. مشكلة تحديث IMG SRC
[تعليمات التحليل] دعونا نلقي نظرة على الكود أولاً:
نسخة الكود كما يلي:
<img id = "pic" onClick = "this.src = 'a.jpg'" src = "aa.jpg" style = "cursor: pointer"/>
بموجب IE ، يمكن استخدام هذا الرمز لتحديث الصور ، ولكن ليس تحت Firefox. إنها في الأساس مشكلة التخزين المؤقت.
[معالجة التوافق] إضافة رقم عشوائي بعد أن يحلها العنوان:
نسخة الكود كما يلي:
<img id = "pic" onClick = "javaScript: this.src = this.src+'؟'+math.random ()" src = "a.jpg" style = "cursor: pointer"/>
لخص
هناك العديد من الاختلافات في JavaScript بين IE و Firefox. لكي أكون متوافقًا ، أعتقد أنه من الضروري تنظيم بعض العوامل الشائعة في مكتبة JS ، مثل عمليات DOM ، ومعالجة الأحداث ، وطلبات XMLHTTPrequest ، وما إلى ذلك ، أو يمكنك أيضًا اختيار استخدام بعض المكتبات الموجودة (مثل jQuery و Yui و ExtJs ، إلخ). ومع ذلك ، أعتقد أنه لا يزال من الضروري فهم هذه الاختلافات ، وهو أمر مفيد للغاية بالنسبة لنا للمشاركة في رمز التوافق وسهولة الاستخدام.
هناك دائمًا حلول أكثر من المشاكل. بغض النظر عن كيفية توافق المتصفح ، يمكن دائمًا حل التطوير الأمامي!