1. مشكلة البحث عن العناصر
1. document.all [الاسم]
(1) المشكلة الحالية: لا يدعم Firefox المستند.
(2) الحل: استخدم getElementsByName (الاسم) ، getElementById (معرف) ، وما إلى ذلك لاستبداله.
2. مشكلة كائن المجموعة
(1) المشكلة الحالية: يمكن استخدام IE () عند استخدام العديد من كائنات فئة المجموعة ، ولكن يمكن استخدامها فقط في Firefox.
على سبيل المثال: في IE ، يمكن استخدام المستند.
(2) الحل: استخدم [] ، في المثال أعلاه ، يمكنك التغيير إلى document.forms ["FormName"]
3. معرف عنصر HTML مرئي في JavaScript
(1) المشكلة الحالية: يمكن استخدام المعرف في عنصر HTML في IE مباشرة كاسم متغير لكائن المرؤوس للمستند. غير متوفر في Firefox.
(2) الحل: استخدم getElementById ("idname") بدلاً من idname كمتغير كائن.
4. تقييم (idname) يحصل على الكائن
(1) المشكلة الحالية: في IE ، يمكن استخدام eval (idname) الحصول على كائنات HTML مع idname معرف ، ولكن لا يمكن استخدامها في Firefox.
(2) الحل: استخدم getElementById (idname) بدلاً من eval (idname).
5. الاسم المتغير هو نفس معرف كائن HTML
(1) المشكلة الحالية: في Firefox ، لأن معرف الكائن ليس هو اسم كائن HTML ، يمكنك استخدام نفس الاسم المتغير مثل معرف كائن HTML ، والذي لا يمكن استخدامه في IE.
(2) الحل: عند إعلان المتغيرات ، أضف VAR لتجنب الغموض ، بحيث يمكن أيضًا تشغيله بشكل طبيعي في IE. بالإضافة إلى ذلك ، من الأفضل عدم أخذ نفس الاسم المتغير مثل معرف كائن HTML لتقليل الأخطاء.
ملاحظة: 3 و 4 و 5 جميعها تنتمي إلى نفس فئة المشاكل.
6. إطار
(1) المشكلة الحالية: في IE ، يمكنك استخدام window.top.frameid و window.top.framename للحصول على النافذة الممثلة بالإطار. فقط window.top.framename يمكن استخدامها في Firefox.
(2) الحل: اضبط معرف واسم الإطار على نفسه ، واستخدم window.top.framename للوصول إلى الإطار.
2. عملية دوم
1. اضبط محتوى النص للعنصر.
(1) المشكلة الحالية: IE يستخدم InnerText ، بينما يستخدم Firefox TextContent لتعيين محتوى نص العنصر.
(2) الحل: إذا كان محتوى النص لا يحتوي على أحرف خاصة مثل "<" و ">" ، فيمكنك استخدام innerhtml. خلاف ذلك ، يمكنك استخدام:
var child = elem.firstchild ؛ إذا (الطفل! = فارغ) elem.removechild (طفل) ؛ elem.appendchild (document.createTextNode (content)) ؛
2. الوالدين ، الوالدين
(1) المشكلة الحالية: يمكن استخدام أي ParentElement للحصول على العقد الأصل ، ويمكن للأمهات. يمكن لأطفال الحصول على جميع العقد الفرعية من العقد. Firefox لا يدعمه.
(2) الحل: استخدم parentnode و parent.childnodes.
3. شرح الأطفال.
(1) المشكلة الحالية: تفسيرات الأطفال في IE و Firefox مختلفة. لن تتضمن IE العقد النصية الفارغة ، بينما ستشمل Firefox.
(2) الحل: استخدم الأطفال لتصفية العقد النصية ، على النحو التالي:
var children = elem.childnodes ؛ لـ (i = 0 ؛ i <knder.length ؛ i ++) {if (الأطفال [i] .nodeType! = 3) {// filter text notes // ...}}4. شرح document.getElementsByName.
(1) المشكلة الحالية: لن تتحقق GetElementsByName في IE فقط عن عناصر <Rupt> و <img> ، بينما سيتم فحص جميع العناصر تحت Firefox.
(2) الحل: لا تستخدم getElementsByName للتحقق من عناصر أخرى غير <pected> و <img>. إذا كنت ترغب في الحصول على عنصر واحد ، فحاول استخدام GetElementById.
5. شرح document.getElementByid.
(1) المشكلة الحالية: getElementById في IE لا يتحقق فقط من سمة المعرف ، ولكن أيضًا يتحقق من سمة الاسم. سيتم أيضًا إرجاع هذا العنصر عندما تتطابق سمة الاسم مع المعلمة. في Firefox ، سيتم فحص سمة المعرف فقط.
(2) الحل: حاول الاحتفاظ بالمعرف وتسمية نفسه ، ولا تجعل سمة الاسم لعنصر واحد وسمة المعرف لعنصر آخر.
ثالثا. الأحداث
1.
(1) المشكلة الحالية: في IE ، يحتوي كائن الحدث على سمات X و Y ، ولكن ليس في Firefox.
(2) الحل: في Firefox ، ما يعادل event.x هو event.pagex. يمكن استخدامه:
mx = event.x؟ event.x: event.pagex ؛
2. window.event
(1) المشكلة الحالية: استخدام window.event لا يمكن تشغيله على Firefox
(2) الحل:
الكود الأصلي (يمكن تشغيله في IE):
<type type = "button" name = "somebutton" value = "submit" onClick = "javaScript: gotosubmit ()"/> ... <script language = "javaScript"> gotoSubmit () {... ALERT (window.event) ؛ // استخدم window.event ...} </script>رمز جديد (يمكن تشغيله في IE و Firefox):
<type type = "button" name = "somebutton" value = "submit" onClick = "javaScript: gotosubmit (event)"/> ... <script language = "javaScript"> gotosubmit (evt) {evt = evt؟ evt: (window.event؟ window.event: null) ؛ ... تنبيه (EVT) ؛ // استخدم evt ...} </script>3. actactevent و addeventListener
(1) المشكلة الحالية: IE يستخدم المرفق لإضافة الأحداث ، ويستخدم Firefox AddeventListener.
(2) الحل: على النحو التالي ، انتبه إلى الفرق في معلمات الحدث ، واحد هو النقر والآخر هو onclick.
if (document.attachevent) document.attachevent ("انقر" ، clickHandler ، false) ؛
else document.adDeventListener ("onClick" ، clickHandler) ؛
4. القواعد
1. const
(1) المشكلة الحالية: لا يمكن استخدام الكلمة الرئيسية const في IE. على سبيل المثال ، const constvar = 32 ؛ في IE هذا خطأ في بناء الجملة.
(2) الحل: لا تستخدم const ، استخدم var بدلاً من ذلك.
2
(1) المشكلة الحالية: تحتوي الثوابت الحرفية في Firefox على الكثير من الفواصل ، والتي لا يُسمح بها في IE. البيان التالي غير قانوني في IE.
var obj = {'key': 'aaa' ،}
(2) الحل: إزالة الفواصل الزائدة.
5. XML
1. إنشاء xmlhttprequest
(1) المشكلات الحالية: يستخدم Firefox XMLHTTPREQUEST ، أي يستخدم ActivexObject.
(2) الحل:
if (window.xmlHttPrequest) {req = new xmlHttpRequest () ؛ } آخر if (window.activexobject) {req = new ActiveXObject ("Microsoft.xmlHttp") ؛ }2. إنشاء دوم
(1) المشكلة الحالية: Firefox و IE إنشاء DOMS بشكل مختلف.
(2) الحل:
وظيفة createxmldom () {var oxmldom ؛ if (window.activexObject) {// ie oxmldom = new ActivexObject ("Microsoft.xmldom") ؛ } آخر {// firefox oxmldom = document.implementation.createdocument ("" ، "" ، null) ؛ }}3. تحميل XML
(1) المشكلة الحالية: إذا كنت ترغب في تحميل ملفات خارجية أي و Firefox ، فيمكنك استخدامها:
oxmldom.async = false ؛ // هذا ضروري في Firefox
oxmldom.load ("test.xml") ؛
ومع ذلك ، فإنها تقوم بتحميل سلاسل XML بطرق مختلفة. يمكنك استخدام oxmldom.loadxml مباشرة ("<TONT> <Child/> </rout>") في IE ، بينما يحتاج Firefox إلى استخدام Domparser:
var oparser = new Domparser () ؛
var oxmldom = oparser.parsefromstring ("<root/>" ، "text/xml") ؛
(2) الحل: الطريقة الأفضل هي إضافة طريقة loadxml إلى Xmldom التي تم إنشاؤها بواسطة Firefox:
إذا كان (isFirefox) {// يتطلب اكتشاف المتصفح
document.prototype.loadxml = function (sxml) {var obarser = new Domparser () ؛ var oxmldom = oparser.parsefromstring (sxml ، "text/xml") ؛ بينما (this.firstchild) this.removechild (this.firstchild) ؛ لـ (var i = 0 ؛ i <oxmldom.childnodes.length ؛ i ++) {var onewnode = this.importNode (oxmldom.childnodes [i] ، true) ؛ this.appendchild (OneWnode) ؛ }}}وبهذه الطريقة ، يمكن استدعاء طريقة loadxml في IE و Firefox.
4. دعم xpath
(1) المشكلات الحالية: في IE ، يمكنك استخدام SelectNodes الخاص بـ XMLDOM لتحديد العقد بناءً على تمثيل XPath. Firefox أكثر تعقيدًا ويتطلب استخدام Xpathevaluator.
أي:
var lstnodes = oxmldom.documentElement.SelectNodes ("الموظف/الاسم") ؛ لـ (var i = 0 ؛ i <lstnodes.length ؛ i ++) {Alert (lstnodes [i] .firstchild.nodevalue) ؛ }Firefox:
var oevaluator = new xPathevaluator () ؛ var oresult = oevaluator.evaluate ("الموظف/الاسم" ، oxmldom.documentElement ، null ، xpathresult.ordered_node_iterator_type ، null) ؛ var oelement = oresult.iteratenext () ؛ بينما (oelement) {Alert (oelement.firstchild.nodevalue) ؛ oelement = oresult.iteratenext () ؛ }(2) الحل: طريقة أفضل لإضافة طريقة SelectNodes إلى عنصر Firefox.
if (isFirefox) {// يحتاج المستعرض إلى اكتشاف العنصر. النموذج النموذجي. var oresult = oevaluator.evaluate (sxpath ، this ، null ، xpathresult.ordered_node_iterator_type ، null) ؛ var anodes = new array () ؛ if (oresult! = null) {var oelement = oresult.iteratenext () ؛ بينما (oelement) {anodes.push (oelement) ؛ oelement = oresult.iteratenext () ؛ }} إرجاع الأنودس ؛ }}وبهذه الطريقة ، يمكن استدعاء طريقة SelectNodes في كل من IE و Firefox.
5. دعم XSLT
(1) المشكلة الحالية: في IE ، يمكنك استخدام طريقة TransferNode لـ XMLDOM لتحويلها إلى HTML ، بينما يحتاج Firefox إلى استخدام XSLTProcessor.
أي:
oxmldom.load ("exearcee.xml") ؛ oxsldom.load ("exearceee.xslt") ؛ var sresult = oxmldom.transformNode (oxsldom) ؛Firefox:
var oprocessor = New XSLTProcessor () ؛ Oprocessor.ImportStylesheet (Oxsldom) ؛ var oresultdom = oprocessor.transformtodocument (oxmldom) ؛ var oserializer = new xmlserializer () ؛ var sxml = oserializer.serializetoString (oresultdom ، "text/xml") ؛ تنبيه (SXML) ؛
(2) الحل: طريقة أفضل لإضافة طريقة TransferNode إلى عقدة Firefox.
if (isFirefox) {// يحتاج المستعرض إلى اكتشاف node.prototype.transformNode = function (oxsldom) {var oprocessor = new xsltprocessor () ؛ Oprocessor.ImportStylesheet (Oxsldom) ؛ var oresultdom = oprocessor.transformtodocument (oxmldom) ؛ var oserializer = new xmlserializer () ؛ var sxml = oserializer.serializetoString (oresultdom ، "text/xml") ؛ إرجاع SXML ؛ }}وبهذه الطريقة ، يمكن استدعاء طريقة TransferNode في كل من IE و Firefox.
ما سبق هو ملخص لطريقة كتابة JS المتوافقة مع المتصفح ، آمل أن يكون مفيدًا لتعلم الجميع.