1. ปัญหาการค้นหาองค์ประกอบ
1. เอกสารทั้งหมด [ชื่อ]
(1) ปัญหาที่มีอยู่: Firefox ไม่สนับสนุนเอกสารทั้งหมด [ชื่อ]
(2) วิธีแก้ปัญหา: ใช้ getElementsByName (ชื่อ), getElementById (id) ฯลฯ เพื่อแทนที่
2. ปัญหาวัตถุคอลเลกชัน
(1) ปัญหาที่มีอยู่: IE สามารถใช้ () เมื่อใช้วัตถุคลาสคอลเลกชันจำนวนมาก แต่เท่านั้นที่สามารถใช้งานได้ใน Firefox
ตัวอย่างเช่น: ใน IE, document.forms ("formname") สามารถใช้เพื่อส่งคืนแบบฟอร์มด้วยชื่อ "formname" แต่มันไม่ทำงานใน Firefox
(2) วิธีแก้ปัญหา: ใช้ [] ในตัวอย่างข้างต้นคุณสามารถเปลี่ยนเป็น document.forms ["formname"]
3. ID ขององค์ประกอบ HTML สามารถมองเห็นได้ใน JavaScript
(1) ปัญหาที่มีอยู่: ID ในองค์ประกอบ HTML ใน IE สามารถใช้โดยตรงเป็นชื่อตัวแปรของวัตถุรองของเอกสาร ไม่สามารถใช้ได้ใน Firefox
(2) วิธีแก้ปัญหา: ใช้ getElementById ("idName") แทน idName เป็นตัวแปรวัตถุ
4. eval (idname) ได้รับวัตถุ
(1) ปัญหาที่มีอยู่: ใน IE, การใช้ eval (idname) สามารถรับวัตถุ HTML ด้วย Idname ID แต่ไม่สามารถใช้ใน Firefox ได้
(2) วิธีแก้ปัญหา: ใช้ getElementById (idName) แทน eval (idName)
5. ชื่อตัวแปรเหมือนกับ ID วัตถุ HTML
(1) ปัญหาที่มีอยู่: ใน Firefox เนื่องจาก ID วัตถุไม่ใช่ชื่อของวัตถุ HTML คุณสามารถใช้ชื่อตัวแปรเดียวกันกับ ID วัตถุ HTML ซึ่งไม่สามารถใช้ใน IE
(2) การแก้ปัญหา: เมื่อประกาศตัวแปรให้เพิ่ม VAR เพื่อหลีกเลี่ยงความคลุมเครือเพื่อให้สามารถทำงานได้ตามปกติใน IE นอกจากนี้ยังเป็นการดีที่สุดที่จะไม่ใช้ชื่อตัวแปรเดียวกับ ID วัตถุ HTML เพื่อลดข้อผิดพลาด
หมายเหตุ: 3, 4 และ 5 ทั้งหมดอยู่ในหมวดหมู่ของปัญหาเดียวกัน
6. เฟรม
(1) ปัญหาที่มีอยู่: ใน IE คุณสามารถใช้ window.top.frameid และ window.top.frameName เพื่อรับหน้าต่างที่แสดงโดยเฟรม Window.top.framename เท่านั้นที่สามารถใช้ใน Firefox
(2) โซลูชัน: ตั้งค่า ID และชื่อของเฟรมให้เหมือนกันและใช้ window.top.frameName เพื่อเข้าถึงเฟรม
2. การดำเนินการ DOM
1. ตั้งค่าเนื้อหาข้อความขององค์ประกอบ
(1) ปัญหาที่มีอยู่: IE ใช้ InnerText ในขณะที่ Firefox ใช้ TextContent เพื่อตั้งค่าเนื้อหาข้อความองค์ประกอบ
(2) วิธีแก้ปัญหา: หากเนื้อหาข้อความไม่มีอักขระพิเศษเช่น "<" และ ">" คุณสามารถใช้ InnerHTML มิฉะนั้นคุณสามารถใช้:
var child = elem.firstchild; ถ้า (เด็ก! = null) elem.removeChild (เด็ก); elem.AppendChild (document.createTextNode (เนื้อหา));
2. Parentelement, Parent.children
(1) ปัญหาที่มีอยู่: IE สามารถใช้ parentelement เพื่อรับโหนดหลักและผู้ปกครองเด็กสามารถรับโหนดลูกทั้งหมดของโหนด Firefox ไม่รองรับ
(2) วิธีแก้ปัญหา: ใช้ parentnode และ parent.childnodes
3. คำอธิบายของเด็ก
(1) ปัญหาที่มีอยู่: คำอธิบายของเด็กใน IE และ Firefox นั้นแตกต่างกัน IE จะไม่รวมโหนดข้อความว่างเปล่าในขณะที่ Firefox จะรวม
(2) วิธีแก้ปัญหา: ใช้ ChildNodes เพื่อกรองโหนดข้อความดังนี้:
var children = elem.childnodes; สำหรับ (i = 0; i <children.length; i ++) {ถ้า (เด็ก [i] .nodeType! = 3) {// ตัวกรองโหนดข้อความ // ... }}4. คำอธิบายของ document.getElementsByName
(1) ปัญหาที่มีอยู่: getElementsByName ใน IE จะตรวจสอบองค์ประกอบ <put> และ <IMG> เท่านั้นในขณะที่องค์ประกอบทั้งหมดจะถูกตรวจสอบภายใต้ Firefox
(2) วิธีแก้ปัญหา: อย่าใช้ GetElementsByName เพื่อตรวจสอบองค์ประกอบอื่นนอกเหนือจาก <put> และ <IMG> หากคุณต้องการรับองค์ประกอบเดียวให้ลองใช้ GetElementById
5. คำอธิบายของ document.getElementById
(1) ปัญหาที่มีอยู่: GetElementById ใน IE ไม่เพียง แต่ตรวจสอบแอตทริบิวต์ ID แต่ยังตรวจสอบแอตทริบิวต์ชื่อด้วย องค์ประกอบนี้จะถูกส่งคืนเมื่อแอตทริบิวต์ชื่อตรงกับพารามิเตอร์ ใน Firefox จะมีการตรวจสอบแอตทริบิวต์ ID เท่านั้น
(2) วิธีแก้ปัญหา: ลองเก็บ ID และตั้งชื่อเหมือนกันและไม่ทำให้แอตทริบิวต์ชื่อขององค์ประกอบหนึ่งและแอตทริบิวต์ ID ขององค์ประกอบอื่นเหมือนกัน
iii. เหตุการณ์
1. event.x และ event.y ปัญหา
(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 = "button" name = "sybutton" value = "ส่ง" onclick = "JavaScript: gotosubmit ()"/> ... ... <ภาษาสคริปต์ = "javascript"> ฟังก์ชั่น gotosubmit () {... แจ้งเตือน (window.event); // ใช้ window.event ... } </script>รหัสใหม่ (สามารถทำงานใน IE และ Firefox):
<input type = "button" name = "sybutton" value = "ส่ง" onclick = "JavaScript: gotosubmit (เหตุการณ์)"/> ... <ภาษาสคริปต์ = "javascript"> ฟังก์ชั่น gotosubmit (evt) {evt = evt? evt: (window.event? window.event: null); ... แจ้งเตือน (EVT); // ใช้ evt ... } </script>3. attaidevent และ addeventListener
(1) ปัญหาที่มีอยู่: IE ใช้ AttachEvent เพื่อเพิ่มเหตุการณ์และ Firefox ใช้ AddEventListener
(2) วิธีแก้ปัญหา: ดังนี้ให้ความสนใจกับความแตกต่างในพารามิเตอร์เหตุการณ์หนึ่งคือคลิกและอีกอันคือ onclick
if (document.attachevent) document.attachevent ("คลิก", clickhandler, false);
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, IE ใช้ ActiveXObject
(2) วิธีแก้ปัญหา:
if (window.xmlhttprequest) {req = ใหม่ xmlhttprequest (); } else if (window.activexobject) {req = new ActiveXObject ("microsoft.xmlhttp"); -2. สร้าง DOM
(1) ปัญหาที่มีอยู่: Firefox และ IE สร้าง Doms แตกต่างกัน
(2) วิธีแก้ปัญหา:
ฟังก์ชั่น createxmldom () {var oxmldom; if (window.activexobject) {// ie oxmldom = new ActiveXObject ("Microsoft.xmldom"); } else {// firefox oxmldom = document.implementation.createdocument ("", "", null); -3. โหลด xml
(1) ปัญหาที่มีอยู่: หากคุณต้องการโหลดไฟล์ภายนอกเช่นและ Firefox คุณสามารถใช้:
oxmldom.async = false; // สิ่งนี้จำเป็นใน Firefox
oxmldom.load ("test.xml");
อย่างไรก็ตามพวกเขาโหลดสตริง XML ในรูปแบบที่แตกต่างกัน คุณสามารถใช้ oxmldom.loadxml โดยตรง ("<root> <เด็ก/> </root>") ใน IE ในขณะที่ Firefox ต้องใช้ Domparser:
var oparser = new Domparser ();
var oxmldom = oparser.parsefromstring ("<root/>", "text/xml");
(2) วิธีแก้ปัญหา: วิธีที่ดีกว่าคือการเพิ่มวิธีการโหลด LoadXML ให้กับ XMLDOM ที่สร้างโดย Firefox:
if (isfirefox) {// ต้องการการตรวจจับเบราว์เซอร์
document.prototype.loadxml = function (sxml) {var oparser = 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 xPathEfaluator (); var oresult = oeValuator.evaluate ("พนักงาน/ชื่อ", oxmldom.documentelement, null, xpathresult.ordered_node_iterator_type, null); var oElement = oreResult.iteratenext (); ในขณะที่ (oElement) {แจ้งเตือน (oElement.firstchild.nodevalue); OELEMENT = ORESULT.ITERATENEXT (); -(2) วิธีการแก้ปัญหา: วิธีที่ดีกว่าในการเพิ่มวิธีการเลือก SelectNodes ในองค์ประกอบของ Firefox
if (isfirefox) {// เบราว์เซอร์จำเป็นต้องตรวจจับ element.prototype.selectNodes = function (sxpath) {var oevaluator = new XPathEvaluator (); var oresult = oeValuator.evaluate (sxpath, นี่, null, xpathresult.ordered_node_iterator_type, null); var anodes = new Array (); if (oresult! = null) {var oElement = oreResult.iteratenext (); ในขณะที่ (oelement) {anodes.push (oelement); OELEMENT = ORESULT.ITERATENEXT (); }} return anodes; -ด้วยวิธีนี้วิธี SelectNodes สามารถเรียกได้ทั้งใน IE และ Firefox
5. การสนับสนุน XSLT
(1) ปัญหาที่มีอยู่: ใน IE คุณสามารถใช้วิธีการถ่ายโอนของ XMLDOM เพื่อแปลงเป็น HTML ในขณะที่ Firefox ต้องใช้ XSLTProcessor
เช่น:
oxmldom.load ("Exployee.xml"); oxsldom.load ("Exployee.xslt"); var sresult = oxmldom.transformnode (oxsldom);Firefox:
var oprocessor = New XsltProcessor (); oprocessor.importstylesheet (oxsldom); var oresultdom = oprocessor.transformTodocument (oxmldom); var oserializer = ใหม่ xmlserializer (); var sxml = oserializer.serializeToString (Oresultdom, "text/xml"); การแจ้งเตือน (SXML);
(2) วิธีแก้ปัญหา: วิธีที่ดีกว่าในการเพิ่มวิธีการถ่ายโอนไปยังโหนดของ Firefox
if (isfirefox) {// เบราว์เซอร์จำเป็นต้องตรวจจับ node.prototype.transformnode = function (oxsldom) {var oprocessor = ใหม่ XsltProcessor (); oprocessor.importstylesheet (oxsldom); var oresultdom = oprocessor.transformTodocument (oxmldom); var oserializer = ใหม่ xmlserializer (); var sxml = oserializer.serializeToString (Oresultdom, "text/xml"); ส่งคืน sxml; -ด้วยวิธีนี้วิธีการถ่ายโอนสามารถเรียกได้ทั้งใน IE และ Firefox
ข้างต้นเป็นบทสรุปของวิธีการเขียน JS ที่เข้ากันได้กับเบราว์เซอร์ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน