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