تحليل موجز لقضايا توافق المتصفح في JavaScript

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

1. النص الداخلي و innercontent

1) وظائف النص الداخلي والداخلية هي نفسها

2) دعم متصفح النص الداخلي قبل IE8

3) الإصدار القديم الداخلي من دعم Firefox

4) يدعم الإصدار الجديد من المتصفح كلتا الطريقتين

 1 // الإصدار القديم من المتصفحات متوافق مع innertext و innercontent2 if (element.textContent) {3 return element.textContent ؛ 4} else {5 return element.innertext ؛ 6}

2. احصل على قضايا التوافق في العقد/العناصر الأخ

1) العقد الأخ ، جميع المتصفحات تدعم

①nextsibling عقدة الأخ التالية ، والتي قد تكون عقدة غير عنصر ؛ سيتم الحصول على عقدة نصية

previcibling قد تكون عقدة الأخوة السابقة عقدة غير عنصر ؛ سيتم الحصول على عقدة النص

2) عناصر الأخ ، IE8 لم تدعم من قبل

previcepelementsibling احصل على العنصر الأخ القادم السابق ويتجاهل الفراغات

②nextelementsibling الحصول على العنصر القادم المجاور للأخوة ويتجاهل الفراغات

 // متصفح متوافق // احصل على وظيفة العنصر التالي التالي getNextElement (element) {// الكشف عن القدرة إذا (element.nextelementibling) {return element.nextelementibling ؛ } آخر {var node = element.nextsibling ؛ بينما (node ​​&& node.nodeType! == 1) {node = node.nextibling ؛ } return node ؛ }}

 /*** إرجاع العنصر السابق*param element* @returns {*}*/function getPreviousElement (element) {if (element.previouselementibling) {return element.previouselementibling ؛ } آخر {var el = element.previousSibling ؛ بينما (el && el.nodeType! == 1) {el = el.previousSibling ؛ } إرجاع EL ؛ }}

 /*** متصفح متوافق مع العنصر الأول firstElementChild*param parent*returns {*}*/function getFirStelement (parent) {if (parent.firstelementChild) {return parent.firstelementchild ؛ } آخر {var el = parent.firstchild ؛ بينما (el && el.nodeType! == 1) {el = el.nextsibling ؛ } إرجاع EL ؛ }}

 /*** إرجاع العنصر الأخير*param parent*regurns {*}*/function getLastElement (parent) {if (parent.lastelementChild) {return parent.lastelementchild ؛ } آخر {var el = parent.lastchild ؛ بينما (el && el.nodeType! == 1) {el = el.previousSibling ؛ } إرجاع EL ؛ }}

 /*** احصل على جميع عناصر الأخوة للعنصر الحالي*param element* @returns {array}*/function sibling (element) {if (! element) return ؛ عناصر var = [] ؛ var el = element.previoussibling ؛ بينما (el) {if (el.nodeType === 1) {elements.push (el) ؛ } el = el.previoussibling ؛ } el = element.previoussibling ؛ بينما (el) {if (el.nodeType === 1) {elements.push (el) ؛ } el = el.nextsibling ؛ } el = element.previoussibling ؛ } عناصر العودة ؛}

3. Array.Filter () ؛

// اختبر جميع العناصر مع الوظيفة المحددة وإنشاء صفيف جديد يحتوي على جميع العناصر التي اجتاز الاختبار

 // متوافق مع البيئة القديمة if (! array.prototype.filter) {array.prototype.filter = function (fun/ *، thisarg */) {"use Strict" ؛ if (هذا === void 0 || هذا === null) رمي نوع جديد typeerror () ؛ var t = object (this) ؛ var len = t.length >>> 0 ؛ if (typeof fun! == "function") رمي نوع جديد () ؛ var res = [] ؛ var thisarg = encuments.length> = 2؟ الحجج [1]: void 0 ؛ لـ (var i = 0 ؛ i <len ؛ i ++) {if (i in t) {var val = t [i] ؛ ) // لكن هذه الطريقة الجديدة ، وتصادمات يجب أن تكون // نادرة ، لذلك استخدم البديل المتوافق أكثر. if (fun.call (thisarg ، val ، i ، t)) res.push (val) ؛ }} return res ؛ } ؛}

4. array.foreach () ؛

// اجتياز صفيف

 // متوافق مع البيئات القديمة // خطوات إنتاج ECMA-262 ، الإصدار 5 ، 15.4.4.18// المرجع: http://es5 إذا (هذا == null) {رمي نوع جديد ('هذا فارغ أو غير محدد') ؛ } // 1. دع o تكون نتيجة لاستدعاء toobject () تمرير // | هذا | القيمة كوسيطة. var o = object (this) ؛ . // 3. دعنا يكون touint32 (Lenvalue). var len = o.length >>> 0 ؛ // 4. إذا كان قابلاً للتطبيق (رد فعل) خطأ ، فأرمي استثناء من النوع. // راجع: http://es5.github.com/#x9.11 if (typeof callback! == "function") {رمي نوع جديد (callback + 'ليس دالة') ؛ } // 5. إذا تم توفير thisarg ، فليكن thisarg ؛ آخر دع / / t يكون غير محدد. if (ediuments.length> 1) {t = thisarg ؛ } // 6. دع k يكون 0 k = 0 ؛ // 7. كرر ، بينما K <len بينما (k <len) {var kvalue ؛ // دع PK يكون tostring (k). // هذا ضمني لمشغلي LHS للمشغل // ب. دع kpresent تكون نتيجة لاستدعاء Hasproperty // الطريقة الداخلية لـ O مع الوسيطة PK. // يمكن الجمع بين هذه الخطوة مع c // c. إذا كان kpresent صحيحًا ، فإذا (k في o) {// i. دع Kvalue يكون نتيجة لاستدعاء طريقة الحصول على internal // O مع الوسيطة PK. kvalue = o [k] ؛ // الثاني. استدعاء الطريقة الداخلية للمكالمة مع T as // قائمة القيمة والوسيطة هذه التي تحتوي على kvalue ، k ، و o. callback.call (t ، kvalue ، k ، o) ؛ } // د. زيادة K بحلول 1. K ++ ؛ } // 8. إرجاع غير محدد} ؛}

5. حدث التسجيل

.addeventListener = function (النوع ، المستمع ، usecapture) {} ؛

// اسم حدث المعلمة الأول

// وظيفة معالج الأحداث الثانية (المستمع)

// المعلمة الثالثة تصور فقاعة كاذبة

//سيتم دعمه فقط بعد IE9

// متوافق مع البيئات القديمة

 var eventTools = {addEventListener: function (element ، eventName ، beasher) {// detection if (element.addeventListener) {element.addeventListener (eventName ، bister ، false) ؛ } if if (element.attachevent) {element.attachevent ("on" + eventName ، leader) ؛ } else {element ["on" + eventName] = beather ؛ }} ، // إذا كنت ترغب في إزالة الأحداث ، فلا يمكنك استخدام الوظيفة المجهولة لإزالة redisteventListener: function (element ، eventName ، beasher) {if (element.removeeventListener) {element.removeeventListener (eventName ، beasher ، false) ؛ } آخر إذا (element.detachevent) {// ie8 قبل التسجيل. attachevent وإزالة الأحداث. } آخر {element ["on" + eventName] = null ؛ }}} ؛

6. كائن الحدث

1) معلمة الحدث E هي كائن الحدث ، طريقة الاستحواذ القياسية

btn.onclick = function (e) {}

2) مرحلة حدث E.EventPhase ، لم يدعمها IE8 من قبل

3)

ط) قبل IE8 srcelement

2) المتصفح متوافق

var target = e.target || window.event.srcelement ؛

 // الحصول على كائن الحدث متوافق مع المتصفح getevent: function (e) {return e || window.event ؛ // طريقة قياسية للحصول على كائن الحدث E ؛ Window.event طريقة للحصول على كائن الحدث قبل IE8} // متوافق مع GetTarget الهدف: Function (E) {return E.Target || E.Srcelement ؛ }

7. احصل على موضع الماوس على الصفحة

① الموضع في المنطقة المرئية: E.Clientx E.Clienty

② الموقع في المستند:

I) E.Pagex E.pagey

2) المتصفح متوافق

 var scrolltop = document.documentElement.scrolltop || document.body.scrolltop ؛ var pagey = e.clienty + scrolltop ؛

8. احصل على المسافة للتمرير

 // متصفح متوافق var scrolltop = document.documentElement.scrolltop || document.body.scrolltop ؛

9. إلغاء اختيار النص

 // متوافق مع Window.getSelection؟ window.getSelection (). removeallranges (): document.selection.empty () ؛

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

التحليل الموجز أعلاه لقضايا توافق المتصفحات في JavaScript هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.