1. document.formname.item ("itemname") ปัญหา
คำอธิบายปัญหา: ใน IE คุณสามารถใช้ document.formname.item ("itemname") หรือ document.formname.elements ["ElementName"]; ใน Firefox คุณสามารถใช้ document.formname.elements ["ElementName"] เท่านั้น
วิธีแก้ปัญหา: ใช้ document.formname.elements ["ElementName"] ในลักษณะที่เป็นเอกภาพ
2. ปัญหาวัตถุคอลเลกชัน
คำอธิบายปัญหา: ใน IE คุณสามารถใช้ () หรือ [] เพื่อรับวัตถุคลาสคอลเลกชัน; ใน Firefox คุณสามารถใช้ [] เพื่อรับวัตถุคลาสคอลเลกชัน
วิธีแก้ปัญหา: ใช้ [] เพื่อรับวัตถุคลาสคอลเลกชันในลักษณะที่เป็นเอกภาพ
3. ปัญหาแอตทริบิวต์ที่กำหนดเอง
คำอธิบายปัญหา: ใน IE คุณสามารถใช้วิธีการรับแอตทริบิวต์ปกติเพื่อรับแอตทริบิวต์ที่กำหนดเองหรือคุณสามารถใช้ getAttribute () เพื่อรับแอตทริบิวต์ที่กำหนดเอง; ใน Firefox คุณสามารถใช้ GetAttribute () เพื่อรับแอตทริบิวต์ที่กำหนดเองเท่านั้น
วิธีแก้ปัญหา: ได้รับแอตทริบิวต์ที่กำหนดเองอย่างสม่ำเสมอผ่าน GetAttribute ()
4. eval ("idname") ปัญหา
คำอธิบายปัญหา: ใน IE คุณสามารถใช้ eval ("idName") หรือ getElementById ("idName") เพื่อรับวัตถุ HTML ด้วย idName; ใน Firefox คุณสามารถใช้ GetElementById ("Idname") เพื่อรับวัตถุ HTML ด้วย Idname
วิธีแก้ปัญหา: ใช้ getElementById ("idName") เพื่อรับวัตถุ HTML ด้วย ID เป็นชื่อ IDNAME
5. ปัญหาของชื่อตัวแปรและ id ของวัตถุ HTML บางอย่าง
คำอธิบายปัญหา: ภายใต้ IE, ID ของวัตถุ HTML สามารถใช้โดยตรงเป็นชื่อตัวแปรของวัตถุรองของเอกสาร แต่ไม่ใช่ใน Firefox; ภายใต้ Firefox ชื่อตัวแปรที่เหมือนกับ ID วัตถุ HTML สามารถใช้งานได้ แต่ไม่ใช่ใน IE
วิธีแก้ปัญหา: ใช้ document.getElementById ("idname") แทน document.idname เป็นการดีที่สุดที่จะไม่ใช้ชื่อตัวแปรที่มี ID วัตถุ HTML เดียวกันเพื่อลดข้อผิดพลาด เมื่อประกาศตัวแปรให้เพิ่มคำหลัก VAR เพื่อหลีกเลี่ยงความคลุมเครือ
6. ปัญหา Const
คำอธิบายปัญหา: ใน Firefox คุณสามารถใช้คำหลัก const หรือคำหลัก var เพื่อกำหนดค่าคงที่; ใน IE คุณสามารถใช้คำหลัก VAR เพื่อกำหนดค่าคงที่
วิธีแก้ปัญหา: ใช้คำหลัก VAR เพื่อกำหนดค่าคงที่อย่างสม่ำเสมอ
7. ปัญหาแอตทริบิวต์อินพุต
คำอธิบายปัญหา: คุณสมบัติ input.type ภายใต้ IE เป็นแบบอ่านอย่างเดียว; แต่คุณสมบัติ input.type ภายใต้ Firefox คือการอ่าน-เขียน
วิธีแก้ปัญหา: อย่าแก้ไขคุณสมบัติ input.type หากคุณต้องแก้ไขคุณสามารถซ่อนอินพุตดั้งเดิมก่อนจากนั้นแทรกองค์ประกอบอินพุตใหม่ในตำแหน่งเดียวกัน
8. หน้าต่างปัญหา
คำอธิบายปัญหา: หน้าต่างสามารถทำงานได้ภายใต้ IE เท่านั้นไม่ใช่ใน Firefox เนื่องจากเหตุการณ์ Firefox สามารถใช้ได้เฉพาะในฉากที่เหตุการณ์เกิดขึ้น
วิธีแก้ปัญหา: เพิ่มพารามิเตอร์เหตุการณ์ในฟังก์ชั่นที่เหตุการณ์เกิดขึ้นและใช้ var myEvent = evt? eVt: (window.event? window.event: null)
ตัวอย่าง:
<อินพุต type = "ปุ่ม" onclick = "dosomething (เหตุการณ์)"/> <script language = "javascript"> ฟังก์ชั่น dosomething (evt) {var myevent = evt? evt: (window.event? window.event: null) ... }}9. Event.x และ Event.y ปัญหา
คำอธิบายปัญหา: ภายใต้ IE วัตถุคู่มีแอตทริบิวต์ x และ y แต่ไม่มีแอตทริบิวต์ pagex และ pagey; ภายใต้ Firefox วัตถุคู่มีแอตทริบิวต์ pagex และ pagey แต่ไม่มีแอตทริบิวต์ x และ y
วิธีแก้ปัญหา: var myx = event.x? Event.x: event.pagex; var myy = event.y? Event.y: Event.pagey;
หากคุณพิจารณาปัญหาที่ 8 เพียงใช้ MyEvent แทนเหตุการณ์
10. เหตุการณ์ปัญหาการประสาน
คำอธิบายปัญหา: ภายใต้ IE วัตถุคู่มีคุณสมบัติ SRCELEMENT แต่ไม่มีคุณสมบัติเป้าหมาย ภายใต้ Firefox วัตถุคู่มีคุณสมบัติเป้าหมาย แต่ไม่มีคุณสมบัติ srcelement
วิธีแก้ปัญหา: ใช้ srcobj = event.srcelement? Event.srcelement: Event.target;
หากคุณพิจารณาปัญหาที่ 8 เพียงใช้ MyEvent แทนเหตุการณ์
11. window.location.href ปัญหา
คำอธิบายปัญหา: ใน IE หรือ Firefox2.0.x คุณสามารถใช้ window.location หรือ window.location.href; ใน Firefox1.5.x คุณสามารถใช้ Window.Location เท่านั้น
วิธีแก้ปัญหา: ใช้ window.location แทน window.location.href แน่นอนคุณสามารถพิจารณาใช้วิธีการตั้งสถานที่ ()
12. ปัญหาหน้าต่างโมดอลและไม่ใช่โมดอล
คำอธิบายปัญหา: ภายใต้ IE, Windows Modal และ Non-Modal สามารถเปิดได้ผ่าน showmodaldialog และ showmodelessDialog; ภายใต้ Firefox มันไม่สามารถ
วิธีแก้ปัญหา: ใช้ window.open (pageurl, ชื่อ, พารามิเตอร์) เพื่อเปิดหน้าต่างใหม่
หากคุณต้องการส่งพารามิเตอร์ในหน้าต่างลูกกลับไปที่หน้าต่างพาเรนต์คุณสามารถใช้ window.opener ในหน้าต่างลูกเพื่อเข้าถึงหน้าต่างพาเรนต์ หากหน้าต่างหลักจำเป็นต้องควบคุมหน้าต่างลูกให้ใช้ var subwindow = window.open (pageurl, ชื่อ, พารามิเตอร์); เพื่อให้ได้วัตถุหน้าต่างที่เปิดใหม่
สิบสามปัญหาเฟรมและ iframe
เฟรมต่อไปนี้เป็นตัวอย่าง:
(1) การเข้าถึงวัตถุเฟรม
IE: ใช้ window.frameId หรือ window.frameName เพื่อเข้าถึงวัตถุเฟรมนี้
Firefox: ใช้ window.framename เพื่อเข้าถึงวัตถุเฟรมนี้;
วิธีแก้ปัญหา: ใช้ window.document.getElementById ("frameid") เพื่อเข้าถึงวัตถุเฟรมนี้;
(2) สลับเนื้อหาเฟรม
ในทั้ง IE และ Firefox คุณสามารถใช้ window.document.getElementById ("frameid"). src = "webjx.com.html" หรือ window.framename.location = "webjx.com.html" เพื่อสลับเนื้อหาของเฟรม
หากคุณต้องการส่งพารามิเตอร์ในเฟรมกลับไปที่หน้าต่างหลักคุณสามารถใช้คำหลักหลักในเฟรมเพื่อเข้าถึงหน้าต่างพาเรนต์
14. ปัญหาการโหลดร่างกาย
คำอธิบายปัญหา: วัตถุร่างกายของ Firefox มีอยู่ก่อนที่แท็กร่างกายจะอ่านโดยเบราว์เซอร์อย่างเต็มที่ ในขณะที่วัตถุร่างกายของ IE จะต้องมีอยู่หลังจากแท็กร่างกายถูกอ่านโดยเบราว์เซอร์อย่างเต็มที่
[หมายเหตุ] ปัญหานี้ยังไม่ได้รับการตรวจสอบจริงและจะได้รับการแก้ไขหลังจากการตรวจสอบ
[หมายเหตุ] ได้รับการพิสูจน์แล้วว่าปัญหาข้างต้นไม่มีอยู่ใน IE6, Opera9 และ Firefox2 สคริปต์ JS อย่างง่ายสามารถเข้าถึงวัตถุและองค์ประกอบทั้งหมดที่โหลดก่อนสคริปต์แม้ว่าองค์ประกอบนี้ยังไม่ได้รับการโหลด
15. วิธีการมอบหมายกิจกรรม
คำอธิบายปัญหา: ใน IE ให้ใช้ document.body.onload = inject; ในกรณีที่ฟังก์ชั่น inject () ถูกนำไปใช้ก่อนหน้านี้; ใน Firefox ให้ใช้ document.body.onload = inject ();
วิธีแก้ปัญหา: ใช้ document.body.onload = ฟังก์ชั่นใหม่ ('inject ()'); หรือ document.body.onload = function () {/* นี่คือรหัส*/}
[หมายเหตุ] ความแตกต่างระหว่างฟังก์ชั่นและฟังก์ชั่น
16. ความแตกต่างระหว่างองค์ประกอบหลักที่เข้าถึงได้
คำอธิบายปัญหา: ภายใต้ IE ให้ใช้ obj.parentelement หรือ obj.parentNode เพื่อเข้าถึงโหนดแม่ของ OBJ; ภายใต้ Firefox ให้ใช้ obj.parentNode เพื่อเข้าถึงโหนดแม่ของ OBJ
วิธีแก้ปัญหา: เนื่องจากทั้ง Firefox และ IE สนับสนุน DOM, OBJ.ParentNode ใช้เพื่อเข้าถึงโหนดพาเรนต์ของ OBJ
17. ปัญหาของข้อความ innerText
คำอธิบายปัญหา: InnerText ทำงานได้อย่างถูกต้องใน IE แต่ InnerText ไม่ทำงานใน Firefox
วิธีแก้ปัญหา: ใช้ textContent แทน innerText ในเบราว์เซอร์ที่ไม่ใช่ IE
ตัวอย่าง:
if (navigator.appname.indexof ("Explorer")> -1) {document.getElementById ('องค์ประกอบ'). innerText = "ข้อความของฉัน"; } else {document.getElementById ('องค์ประกอบ'). textContent = "; ข้อความของฉัน"; -[หมายเหตุ] InnerHTML ได้รับการสนับสนุนโดยเบราว์เซอร์เช่น IE และ Firefox คนอื่น ๆ เช่น Outerhtml ได้รับการสนับสนุนโดย IE เท่านั้นดังนั้นจึงเป็นการดีที่สุดที่จะไม่ใช้มัน
18. ปัญหาการทำงานของตาราง
คำอธิบายปัญหา: IE, Firefox และเบราว์เซอร์อื่น ๆ มีการทำงานที่แตกต่างกันบนแท็กตาราง ใน IE มันไม่ได้รับอนุญาตให้กำหนดค่า innerhtml ให้กับตารางและ tr เมื่อใช้ JS การใช้วิธีการภาคผนวกไม่ทำงาน Document.appendchild รองรับ Firefox เมื่อใส่แถวลงในตาราง แต่ IE ไม่รองรับ
วิธีแก้ปัญหา: ใส่แถวลงใน tbody อย่าใส่ลงในตารางโดยตรง
สารละลาย:
// เพิ่มบรรทัดว่างลงในตาราง: var row = otable.insertrow (-1); var cell = document.createElement ("TD"); cell.innerhtml = ""; cell.className = "xxxx"; row.appendchild (เซลล์);[หมายเหตุ] ขอแนะนำให้ใช้ชุด JS Framework เพื่อใช้งานตารางเช่น jQuery
•รับจำนวนแถวและคอลัมน์ของตาราง
ใน IE คุณสามารถใช้รหัสต่อไปนี้เพื่อรับจำนวนแถวและคอลัมน์:
var detailt = grid.getTable ("11"); // รับความยาวของแถว var r = detailt.rows.length; // รับความยาวของคอลัมน์ var l = detailt.cells.length;และการได้รับความยาวของคอลัมน์ใน Firefox หรือ Google นั้นไม่ถูกต้อง
สารละลาย:
var detailt = grid.getTable ("11"); // รับความยาวของแถว var r = detailt.rows.length; // รับความยาวของคอลัมน์ var l = detailt.rows [0] .cells.length;19. ปัญหาการกำหนดความกว้างและความสูงของวัตถุ
คำอธิบายปัญหา: คำสั่งที่คล้ายกับ obj.style.height = imgobj.height ใน Firefox ไม่ถูกต้อง
วิธีแก้ปัญหา: ใช้ obj.style.height = imgobj.height + 'px' ในเครื่องแบบ;
20. SetAttribute ('Style', 'Color: Red;')
Firefox รองรับ (ยกเว้นเช่นเบราว์เซอร์ทั้งหมดรองรับ) คือ IE ไม่รองรับ
วิธีแก้ปัญหา: Don't SetAttribute ('Style', 'Color: Red')
ใช้ object.style.csstext = 'สี: สีแดง;' (มีข้อยกเว้นสำหรับการเขียนนี้)
วิธีที่ดีที่สุดคือใช้วิธีการทั้งหมดข้างต้นและมันจะไม่สามารถป้องกันได้
21. การตั้งค่าชื่อคลาส
SetAttribute ('คลาส', 'StyleClass')
Firefox รองรับ แต่ IE ไม่รองรับ (ระบุชื่อแอตทริบิวต์คือคลาสคือ IE จะไม่ตั้งค่าแอตทริบิวต์คลาสขององค์ประกอบในทางตรงกันข้าม IE จะรับรู้แอตทริบิวต์ ClassName โดยอัตโนมัติเมื่อใช้ setAttribute) โดยอัตโนมัติ)
สารละลาย:
SetAttribute ('class', 'StyleClass') setAttribute ('className', 'StyleClass') หรือ direct Object.className = 'StyleClass';ทั้งสองส่วนสนับสนุนวัตถุ
22. ตั้งค่ากิจกรรมด้วย setAttribute
var obj = document.getElementById ('objid');
obj.setAttribute ('onclick', 'funcitonname ();');
Firefox รองรับ แต่ IE ไม่รองรับ
สารละลาย:
ใน IE ต้องใช้สัญลักษณ์ DOT เพื่ออ้างถึงตัวจัดการเหตุการณ์ที่ต้องการและต้องมีการกำหนดฟังก์ชั่นที่ไม่ระบุชื่อ
ดังนี้:
var obj = document.getElementById ('objid'); obj.onclick = function () {fucntionName ();};วิธีนี้รองรับโดยเบราว์เซอร์ทั้งหมด
23. สร้างปุ่มตัวเลือก
เบราว์เซอร์อื่นที่ไม่ใช่ IE
var rdo = document.createElement ('อินพุต'); rdo.setAttribute ('type', 'Radio'); rdo.setAttribute ('ชื่อ', 'radiobtn'); rdo.setAttribute ('ค่า', 'ตรวจสอบ');เช่น:
var rdo = document.createElement ("<input name =" radiobtn "type =" Radio "value =" ตรวจสอบ " />");สารละลาย:
ความแตกต่างนี้แตกต่างจากอันก่อนหน้า คราวนี้มันแตกต่างอย่างสิ้นเชิงดังนั้นจึงไม่มีวิธีทั่วไปในการแก้ปัญหาดังนั้นถ้าเป็น else เท่านั้น
โชคดีที่ IE สามารถจดจำคุณลักษณะที่ไม่ซ้ำกันของเอกสารซึ่งเบราว์เซอร์อื่นไม่สามารถจดจำได้ แก้ไขปัญหา
ทางออกที่รวดเร็วสำหรับ 23 ปัญหาของความเข้ากันได้หลายเบราว์เซอร์ใน JavaScript คือเนื้อหาเต็มรูปแบบที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น