ปัญหาความเข้ากันได้ของเบราว์เซอร์เป็นเรื่องง่ายที่จะเพิกเฉย แต่ส่วนที่สำคัญที่สุดในการพัฒนาจริง ก่อนที่เราจะพูดคุยเกี่ยวกับปัญหาความเข้ากันได้ของเบราว์เซอร์รุ่นเก่าเราต้องเข้าใจก่อนว่าการตรวจจับความสามารถคืออะไร มันคือการตรวจพบว่าเบราว์เซอร์มีความสามารถดังกล่าวนั่นคือเพื่อตรวจสอบว่าเบราว์เซอร์ปัจจุบันรองรับคุณลักษณะหรือวิธีการที่เรียกว่า นี่คือการแนะนำสั้น ๆ
1. InnerText และ InnerContent
1) ฟังก์ชั่นของ InnerText และ InnerContent เหมือนกัน
2) การรองรับเบราว์เซอร์ InnerText ก่อน IE8
3) Firefox Support รุ่นเก่า
4) เบราว์เซอร์เวอร์ชันใหม่รองรับทั้งสองวิธี
1 // เบราว์เซอร์เวอร์ชันเก่าเข้ากันได้กับ innerText และ innerContent2 ถ้า (element.textContent) {3 return element.TextContent; 4} else {5 return element.innerText; 6}2. รับปัญหาความเข้ากันได้ของโหนด/องค์ประกอบของพี่ชาย
1) บราเดอร์โหนดเบราว์เซอร์ทั้งหมดรองรับ
① NEXTSibling โหนดพี่ชายคนต่อไปซึ่งอาจเป็นโหนดที่ไม่ใช่องค์ประกอบ จะได้รับโหนดข้อความ
②ก่อนหน้านี้โหนดพี่น้องก่อนหน้านี้อาจเป็นโหนดที่ไม่ใช่องค์ประกอบ จะได้รับโหนดข้อความ
2) องค์ประกอบของพี่ชาย IE8 ไม่สนับสนุนมาก่อน
① preventelementsibling รับองค์ประกอบพี่ชายคนต่อไปก่อนหน้านี้และละเว้นช่องว่าง
② NEXTELEMENTSIBLING รับองค์ประกอบพี่น้องที่อยู่ติดกันถัดไปและละเว้นช่องว่าง
// เบราว์เซอร์ที่เข้ากันได้ // รับฟังก์ชั่นองค์ประกอบพี่น้องถัดไปถัดไป getNextElement (องค์ประกอบ) {// การตรวจจับความสามารถหาก (element.nextElementibling) {return element.nextelementibling; } else {var node = element.nextSibling; ในขณะที่ (node && node.nodeType! == 1) {node = node.nextibling; } ส่งคืนโหนด; - /*** ส่งคืนองค์ประกอบก่อนหน้า*@param Element*@returns {*}*/ฟังก์ชั่น getPreviousElement (องค์ประกอบ) {ถ้า (element.previousElementibling) {return element.previousElementibling; } else {var el = element.previoussibling; ในขณะที่ (el && el.nodeType! == 1) {el = el.previoussibling; } return el; - /*** เบราว์เซอร์ที่เข้ากันได้กับองค์ประกอบแรก FINELEMENTCHILD*@Param Parent*@returns {*}*/ฟังก์ชั่น getFirstelement (Parent) {ถ้า (parent.firstelementchild) {ส่งคืน parent.firstelementchild; } else {var el = parent.firstchild; ในขณะที่ (el && el.nodeType! == 1) {el = el.nextsibling; } return el; - /*** ส่งคืนองค์ประกอบสุดท้าย*@param Parent*@returns {*}*/ฟังก์ชั่น getLastElement (Parent) {ถ้า (parent.lastElementChild) {return parent.lastElementChild; } else {var el = parent.lastChild; ในขณะที่ (el && el.nodeType! == 1) {el = el.previoussibling; } return el; - /*** รับองค์ประกอบพี่น้องทั้งหมดขององค์ประกอบปัจจุบัน*องค์ประกอบ @param*@returns {array}*/ฟังก์ชันพี่น้อง (องค์ประกอบ) {ถ้า (! องค์ประกอบ) กลับ; องค์ประกอบ 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; } return องค์ประกอบ;}3. Array.Filter ();
// ทดสอบองค์ประกอบทั้งหมดด้วยฟังก์ชั่นที่ระบุและสร้างอาร์เรย์ใหม่ที่มีองค์ประกอบทั้งหมดที่ผ่านการทดสอบ
// เข้ากันได้กับสภาพแวดล้อมเก่า ๆ ถ้า (! array.prototype.filter) {array.prototype.filter = ฟังก์ชั่น (fun/ *, thisarg */) {"ใช้เข้มงวด"; if (this === void 0 || this === null) โยน typeError ใหม่ (); var t = วัตถุ (นี่); var len = t.length >>> 0; if (typeof fun! == "function") โยน typeerror ใหม่ (); var res = []; var thisarg = arguments.length> = 2? อาร์กิวเมนต์ [1]: เป็นโมฆะ 0; สำหรับ (var i = 0; i <len; i ++) {ถ้า (i ใน t) {var val = t [i]; // หมายเหตุ: ในทางเทคนิคสิ่งนี้ควร Object.defineProperty AT // ดัชนีถัดไปซึ่งอาจได้รับผลกระทบจาก // คุณสมบัติใน Object.prototype และ Array.prototype // แต่วิธีการใหม่นั้นและการชนควรเป็น // หายากดังนั้นให้ใช้ทางเลือกที่เข้ากันได้มากกว่า ถ้า (fun.call (thisarg, val, i, t)) res.push (val); }} return res; -4. Array.foreach ();
// Traverse Array
// เข้ากันได้กับสภาพแวดล้อมเก่า // ขั้นตอนการผลิตของ ECMA-262, รุ่น 5, 15.4.4.18// การอ้างอิง: http://es5.github.io/#x15.4.4.18if (! array.prototype.foreach) if (this == null) {โยน typeError ใหม่ ('นี่เป็นโมฆะหรือไม่ได้กำหนด'); } // 1. ให้ O เป็นผลลัพธ์ของการเรียก toobject () ผ่าน // | this | ค่าเป็นอาร์กิวเมนต์ var o = วัตถุ (นี่); // 2. ให้ Lenvalue เป็นผลมาจากการเรียกใช้ () ภายใน // วิธีการของ O ด้วยอาร์กิวเมนต์ "ความยาว" // 3. ให้เลนเป็น toUINT32 (lenvalue) var len = o.length >>> 0; // 4. ถ้า iscallable (โทรกลับ) เป็นเท็จให้โยนข้อยกเว้น typeerror // ดู: http://es5.github.com/#x9.11 ถ้า (typeof callback! == "function") {โยน typeerror ใหม่ (callback + 'ไม่ใช่ฟังก์ชัน'); } // 5. ถ้ามีการจัดหาสิ่งนี้ให้เป็น thisarg; อื่นให้ // t ไม่ได้กำหนด if (arguments.length> 1) {t = thisarg; } // 6. ให้ k เป็น 0 k = 0; // 7. ทำซ้ำในขณะที่ k <len ในขณะที่ (k <len) {var kvalue; // a. ให้ PK เป็น toString (k) // นี่เป็นนัยสำหรับตัวดำเนินการ LHS ของผู้ให้บริการใน // b ให้ kpresent เป็นผลมาจากการเรียกวิธีการ hastproperty // ภายในของ o ด้วยอาร์กิวเมนต์ pk // ขั้นตอนนี้สามารถรวมกับ c // c ถ้า kpresent เป็นจริงถ้า (k ใน o) {// i ปล่อยให้ kvalue เป็นผลมาจากการเรียกใช้วิธีการภายใน // ของ O ด้วยอาร์กิวเมนต์ pk kvalue = o [k]; // ii. การโทรวิธีการโทรภายในของการโทรกลับด้วย t as // รายการค่าและอาร์กิวเมนต์นี้ที่มี kvalue, k และ o. callback.call (t, kvalue, k, o); } // d เพิ่ม k โดย 1. k ++; } // 8. ส่งคืน undefined};}5. เหตุการณ์การลงทะเบียน
.AdDeVentListener = ฟังก์ชั่น (ประเภท, ฟัง, usecapture) {};
// ชื่อเหตุการณ์พารามิเตอร์แรก
// ฟังก์ชั่นตัวจัดการเหตุการณ์พารามิเตอร์ที่สอง (ผู้ฟัง)
// พารามิเตอร์ที่สามจริงจับฟองปลอม
// มันจะได้รับการสนับสนุนหลังจาก IE9 เท่านั้น
// เข้ากันได้กับสภาพแวดล้อมเก่า ๆ
var eventTools = {addEventListener: ฟังก์ชั่น (องค์ประกอบ, eventName, ผู้ฟัง) {// การตรวจจับความจุถ้า (element.addeVentListener) {element.addeVentListener (EventName, Listener, False); } อื่นถ้า (element.attachevent) {element.attachevent ("on" + eventName, Listener); } else {element ["on" + eventName] = Listener; }}, // หากคุณต้องการลบเหตุการณ์คุณไม่สามารถใช้ฟังก์ชั่นที่ไม่ระบุชื่อ removeEventListener: ฟังก์ชั่น (องค์ประกอบ, eventName, ผู้ฟัง) {ถ้า (element.removeEventListener) {element.RemoveEventListener (EventName, Listener, False); } อื่นถ้า (element.detachevent) {// ie8 ก่อนลงทะเบียน attachevent และลบ events.detachevent element.detachevent ("on"+eventname, ผู้ฟัง); } else {element ["on" + eventName] = null; -6. วัตถุเหตุการณ์
1) พารามิเตอร์เหตุการณ์ E คือวัตถุเหตุการณ์วิธีการซื้อมาตรฐาน
btn.onclick = function (e) {}
2) ขั้นตอนเหตุการณ์ E.EventPhase IE8 ไม่สนับสนุนมาก่อน
3) E.Target เป็นวัตถุที่กระตุ้นเหตุการณ์เสมอ (ปุ่มคลิก)
ฉัน) ก่อน ie8 srcelement
ii) เข้ากันได้กับเบราว์เซอร์
var target = e.target || window.event.sreceement;
// รับวัตถุเหตุการณ์ที่เข้ากันได้กับเบราว์เซอร์ getEvent: ฟังก์ชั่น (e) {return e || window.event; // วิธีมาตรฐานในการรับวัตถุเหตุการณ์ e; window.event วิธีการรับวัตถุเหตุการณ์ก่อนที่ IE8} // เข้ากันได้กับเป้าหมาย getTarget: ฟังก์ชั่น (e) {return e.target || E.Srelement; -7. รับตำแหน่งเมาส์บนหน้า
①ตำแหน่งในพื้นที่ภาพ: e.clientx e.clienty
②ตำแหน่งในเอกสาร:
i) E.pagex e.pagey
ii) เข้ากันได้กับเบราว์เซอร์
var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var pagey = e.clienty + scrolltop;
8. รับระยะทางเพื่อเลื่อน
// เบราว์เซอร์ที่เข้ากันได้ var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
9. ยกเลิกการเลือกข้อความ
// เข้ากันได้กับหน้าต่างเบราว์เซอร์ GetSelection? window.getSelection (). RemoveAllranges (): document.selection.empty ();
[สรุป] นี่เป็นเพียงบทสรุปบางส่วนและคุณจะพบปัญหาความเข้ากันได้ของเบราว์เซอร์ต่าง ๆ ในระหว่างการพัฒนาจริง เบราว์เซอร์ที่แตกต่างกันจะประสบปัญหาการปรับตัวที่แตกต่างกันบนพีซีและโทรศัพท์มือถือ สิ่งเหล่านี้กำลังรอให้รองเท้าเด็กค้นพบและสรุป ~~ ฉันหวังว่ามันจะช่วยคุณได้ โปรดให้คำแนะนำเกี่ยวกับข้อบกพร่อง ~~~
การวิเคราะห์สั้น ๆ ข้างต้นเกี่ยวกับปัญหาความเข้ากันได้ของเบราว์เซอร์ใน JavaScript เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น