บทความนี้สรุปและวิเคราะห์ปัญหาความเข้ากันได้ทั่วไปใน JavaScript ในเบราว์เซอร์ IE และ Firefox แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
รูปร่าง
document.formname.item ("itemname")เช่น: คุณสามารถใช้ document.formname.item ("itemname") หรือ document.formname.elements ["ElementName"
firefox: เฉพาะ document.formname.elements ["ElementName"]
วิธีแก้ปัญหา: ใช้ document.formname.elements ["ElementName"]
วัตถุคลาสคอลเลกชัน
เช่น: คุณสามารถใช้ () หรือ [] เพื่อรับวัตถุคลาสคอลเลกชัน;
Firefox: ใช้เท่านั้น [] เพื่อรับวัตถุคลาสคอลเลกชัน
วิธีแก้ปัญหา: ใช้ [] เพื่อรับวัตถุคลาสคอลเลกชันในลักษณะที่เป็นเอกภาพ
คุณสมบัติที่กำหนดเอง
IE: คุณสามารถใช้วิธีการรับแอตทริบิวต์ปกติเพื่อรับแอตทริบิวต์ที่กำหนดเองหรือคุณสามารถใช้ getAttribute () เพื่อรับแอตทริบิวต์ที่กำหนดเอง
Firefox: คุณสามารถใช้ GetAttribute () เพื่อรับคุณสมบัติที่กำหนดเองเท่านั้น
การแก้ไข: ได้รับแอตทริบิวต์ที่กำหนดเองอย่างสม่ำเสมอผ่าน GetAttribute ()
การได้มาซึ่งองค์ประกอบ
evals ("idname")IE: คุณสามารถใช้ eval ("idname") หรือ getElementById ("idName") เพื่อรับวัตถุ HTML ด้วย idName;
Firefox: คุณสามารถใช้ GetElementById ("idName") เพื่อรับวัตถุ HTML ด้วย IdName ด้วย IdName
วิธีแก้ปัญหา: ใช้ getElementById ("idName") เพื่อรับวัตถุ HTML ด้วย ID เป็นชื่อ IDNAME
การตั้งชื่อซ้ำ
ปัญหากับชื่อตัวแปรเดียวกันกับ ID วัตถุ HTML ที่แน่นอน
IE: ID ของวัตถุ HTML สามารถใช้โดยตรงเป็นชื่อตัวแปรของวัตถุย่อยของเอกสาร แต่ไม่สามารถใช้ภายใต้ Firefox;
Firefox: คุณสามารถใช้ชื่อตัวแปรเดียวกับ ID วัตถุ HTML แต่คุณไม่สามารถทำได้ใน IE
วิธีแก้ปัญหา: ใช้ document.getElementById ("idname") แทน document.idname เป็นการดีที่สุดที่จะไม่ใช้ชื่อตัวแปรที่มี ID วัตถุ HTML เดียวกันเพื่อลดข้อผิดพลาด เมื่อประกาศตัวแปรเพิ่ม VAR เพื่อหลีกเลี่ยงความคลุมเครือ
const
เช่น: ใช้คำหลัก VAR เพื่อกำหนดตัวแปรเท่านั้น
Firefox: คุณสามารถใช้คำหลัก const หรือคำหลัก VAR เพื่อกำหนดตัวแปร
วิธีแก้ปัญหา: ใช้คำหลัก VAR เพื่อกำหนดตัวแปรอย่างสม่ำเสมอ
input.type
ปัญหาแอตทริบิวต์ input.type
เช่น: แอตทริบิวต์ input.type เป็นแบบอ่านอย่างเดียว
Firefox: แอตทริบิวต์ input.type คือการอ่านและเขียน
window.event
Window.event สามารถวิ่งได้ภายใต้ IE เท่านั้นไม่ใช่ใน Firefox เพราะสามารถใช้งาน Firefox ได้ในฉากที่เกิดเหตุการณ์เท่านั้น
Firefox: เหตุการณ์จะต้องเพิ่มจากแหล่งที่มาสำหรับพารามิเตอร์ที่ผ่าน IE ละเว้นพารามิเตอร์นี้และใช้หน้าต่างเพื่ออ่านเหตุการณ์
สารละลาย:
<script language = "JavaScript"> ฟังก์ชั่นความสนุก (e) {e = e? E: (window.event? window.event: null); } </script>event.x และ event.y
คำอธิบาย: ภายใต้ IE วัตถุคู่มีแอตทริบิวต์ x และ y แต่ไม่มีแอตทริบิวต์ pagex และ pagey; ภายใต้ Firefox วัตถุคู่มีแอตทริบิวต์ pagex และ pagey แต่ไม่มีแอตทริบิวต์ x และ y
วิธีแก้ปัญหา: ใช้ mx (mx = event.x? event.x: event.pagex;) แทน event.x ภายใต้ IE หรือ event.pagex ภายใต้ Firefox
เหตุการณ์.
IE: วัตถุเหตุการณ์มีคุณสมบัติ srcelement แต่ไม่มีคุณสมบัติเป้าหมาย
Firefox: แม้แต่ Object ก็มีคุณสมบัติเป้าหมาย แต่ไม่มีคุณสมบัติ SRCELEMENT
วิธีแก้ปัญหา: ใช้ OBJ (obj = event.srecelement? Event.srecelement: Event.target;) แทนที่จะเป็น Event.srcelement ภายใต้ IE หรือ Event.target ภายใต้ Firefox โปรดให้ความสนใจกับปัญหาความเข้ากันได้ของเหตุการณ์
window.location.href
เช่นหรือ firefox2.0.x: คุณสามารถใช้ window.location หรือ window.location.href;
Firefox1.5.x: ใช้ Window.Location เท่านั้น
วิธีแก้ปัญหา: ใช้ window.location แทน window.location.href
หน้าต่างโมดอลและไม่ใช่โมดอล
เช่น: หน้าต่างแบบโมดอลและไม่ใช่โมดอลสามารถเปิดได้ผ่าน showmodaldialog และ showmodelessDialog
Firefox: ไม่!
วิธีแก้ปัญหา: ใช้ window.open (pageurl, ชื่อ, พารามิเตอร์) เพื่อเปิดหน้าต่างใหม่
หากคุณต้องการส่งพารามิเตอร์ในหน้าต่างลูกกลับไปที่หน้าต่างพาเรนต์คุณสามารถใช้ window.opener ในหน้าต่างลูกเพื่อเข้าถึงหน้าต่างพาเรนต์ ตัวอย่างเช่น: var parwin = window.opener; parwin.document.getElementById ("aqing"). value = "aqing";
กรอบ
เฟรมต่อไปนี้เป็นตัวอย่าง:
<frame src = "xxx.html" id = "frameid" name = "framename" />
1. เข้าถึงวัตถุเฟรม:
[วัตถุที่ส่งคืนใน IE คือวัตถุและประเภทเฉพาะจะแสดงใน FF เช่น: หน้าต่างวัตถุ]
IE: ใช้ window.frameId หรือ window.frameName เพื่อเข้าถึงวัตถุเฟรมนี้ FrameId และ Framename สามารถมีชื่อเดียวกันได้
Firefox: Window.framename เท่านั้นที่สามารถใช้ในการเข้าถึงวัตถุเฟรมนี้
ในทั้ง IE และ Firefox คุณสามารถใช้ Window.document.getElementById ("FrameID") เพื่อเข้าถึงวัตถุเฟรมนี้
2. สลับเนื้อหาเฟรม:
ในทั้ง IE และ Firefox คุณสามารถใช้ window.document.getElementById ("testFrame"). src = "xxx.html" หรือ window.framename.location = "xxx.html" เพื่อสลับเนื้อหาของเฟรม
หากคุณต้องการผ่านพารามิเตอร์ในเฟรมกลับไปที่หน้าต่างหลัก (โปรดทราบว่าไม่ใช่ตัวเปิด แต่เป็นเฟรมพาเรนต์) คุณสามารถใช้พาเรนต์ในเฟรมเพื่อเข้าถึงหน้าต่างพาเรนต์ ตัวอย่างเช่น: parent.document.form1.filename.value = "A";
ร่างกาย
IE: ร่างกายจะต้องมีอยู่หลังจากที่แท็กร่างกายถูกอ่านอย่างเต็มที่โดยเบราว์เซอร์
Firefox: มีร่างกายอยู่ก่อนที่แท็กร่างกายจะอ่านโดยเบราว์เซอร์อย่างเต็มที่
วิธีการมอบหมายงาน
IE: การคัดลอกรหัสมีดังนี้: document.body.onload = inject; // function inject () ได้รับการดำเนินการก่อนหน้านี้
Firefox: การคัดลอกรหัสมีดังนี้: document.body.onload = inject ();
องค์ประกอบหลัก
ความแตกต่างระหว่างองค์ประกอบของ Firefox และ IE (Parentelement)
เช่น: obj.parentelement
Firefox: obj.parentnode
วิธีแก้ปัญหา: เนื่องจากทั้ง Firefox และ IE สนับสนุน DOM โดยใช้ obj.parentNode จึงเป็นตัวเลือกที่ดี
เคอร์เซอร์ตัวชี้เมาส์
เคอร์เซอร์: Hand vs Cursor: Pointer
Firefox: ไม่รองรับมือ
เช่น: สนับสนุนตัวชี้
วิธีแก้ปัญหา: ใช้ตัวชี้อย่างสม่ำเสมอ
ข้อความเนื้อหา
InnerText ใช้งานได้ตามปกติใน IE อย่างไรก็ตาม InnerText ไม่ทำงานใน Firefox จำเป็นต้องมีข้อความ
สารละลาย:
if (navigator.appname.indexof ("Explorer")> -1) {document.getElementById ('องค์ประกอบ'). innerText = "ข้อความของฉัน"; } else {document.getElementById ('องค์ประกอบ'). textC; -การดำเนินการบนตาราง
IE, Firefox และเบราว์เซอร์อื่น ๆ มีการดำเนินการที่แตกต่างกันบนแท็กตาราง ใน IE มันไม่ได้รับอนุญาตให้กำหนดค่า innerhtml ให้กับตารางและ tr เมื่อใช้ JS เพื่อเพิ่ม TR วิธี AppendChild จะไม่มีประโยชน์
สารละลาย:
// เพิ่มบรรทัดว่างลงในตาราง: var row = otable.insertrow (-1); var cell = document.createElement ("TD"); cell.innerhtml = ""; cell.className = "A"; row.appendchild (เซลล์);คอลเลกชันตัวเลือก
การทำงานของคอลเลกชันตัวเลือกในการเลือก
นอกเหนือจาก [], selectname.options.item () ก็เป็นไปได้เช่นกัน นอกจากนี้ SelectName.Options.length, SelectName.options.add/Remove สามารถใช้ในเบราว์เซอร์ทั้งสอง
*โปรดทราบว่าองค์ประกอบถูกกำหนดหลังจากเพิ่มมิฉะนั้นจะล้มเหลว
xmlhttp
if (window.xmlhttprequest) {xmlhttp = ใหม่ xmlhttprequest (); } else if (window.activexobject) {// code สำหรับ IE xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); } if (xmlhttp) {xmlhttp.onreadystatechange = xmlhttpChange; xmlhttp.open ("รับ", url, true); xmlhttp.send (); -สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปข้อผิดพลาดของ JavaScript และทักษะการดีบัก", "บทสรุปของการใช้งานทางคณิตศาสตร์ JavaScript", "ทักษะการดำเนินงาน JAVAScript" Summary ของ JavaScript "สรุปโครงสร้างข้อมูล JavaScript และทักษะอัลกอริทึม" และ "สรุปอัลกอริทึมและทักษะการสำรวจ JavaScript"
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน