ความเข้ากันได้ของ JavaScript เป็นปัญหาสำคัญสำหรับนักพัฒนาเว็บมานานแล้ว ความแตกต่างระหว่างข้อกำหนดที่เป็นทางการมาตรฐานข้อเท็จจริงและการใช้งานที่หลากหลายทำให้นักพัฒนาหลายคนต้องทนทุกข์ทรมานทั้งกลางวันและกลางคืน ด้วยเหตุนี้ความเข้ากันได้ของ JavaScript ของ IE และ Firefox ส่วนใหญ่จะสรุปจากความแตกต่างต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
1. ความแตกต่างระหว่างฟังก์ชั่นและวิธีการ;
2. การเข้าถึงสไตล์และการตั้งค่า;
3. วิธีการ DOM และการอ้างอิงวัตถุ;
4. การจัดการเหตุการณ์;
5. การรักษาความเข้ากันได้สำหรับความแตกต่างอื่น ๆ
1. ความแตกต่างระหว่างฟังก์ชั่นและวิธีการ
1. วิธี getYear ()
[คำแนะนำการวิเคราะห์] ลองดูรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var year = new date (). getYear ();
document.write (ปี);
วันที่ที่คุณได้รับคือ "2010" และวันที่ที่คุณเห็นใน Firefox คือ "110" ส่วนใหญ่เป็นเพราะใน Firefox Getyear ส่งคืนมูลค่าของ "ปีปัจจุบันปี 1900"
【การประมวลผลความเข้ากันได้】เพิ่มเพื่อตัดสินปีเช่น:
การคัดลอกรหัสมีดังนี้:
var year = new date (). getYear ();
ปี = (ปี <1900? (1900+ปี): ปี);
document.write (ปี);
นอกจากนี้คุณยังสามารถเรียกมันผ่าน GetGreetherear GetUtcflyear:
การคัดลอกรหัสมีดังนี้:
var year = new date (). getGreetHear ();
document.write (ปี);
2. ฟังก์ชั่น everal ()
[หมายเหตุการวิเคราะห์] ใน IE คุณสามารถใช้ eval ("idname") หรือ getElementById ("idName") เพื่อรับวัตถุ HTML ด้วย idName; ใน Firefox คุณสามารถใช้ GetElementById ("Idname") เพื่อรับวัตถุ HTML ด้วย Idname
[การประมวลผลความเข้ากันได้] ใช้ GetElementById ("IdName") เพื่อรับวัตถุ HTML ด้วย IdName ด้วย IdName
3. คำสั่ง const
[หมายเหตุวิเคราะห์] คำหลัก const ไม่สามารถใช้ใน IE ชอบ:
การคัดลอกรหัสมีดังนี้:
const Constvar = 32;
ใน IE นี่คือข้อผิดพลาดทางไวยากรณ์
【การประมวลผลที่เข้ากันได้】อย่าใช้ const ใช้ var แทน
4. var
[คำแนะนำการวิเคราะห์] โปรดดูรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
echo = function (str) {
document.write (str);
-
ฟังก์ชั่นนี้ทำงานตามปกติบน IE แต่มีการรายงานข้อผิดพลาดภายใต้ Firefox
[การประมวลผลที่เข้ากันได้] เป็นเรื่องปกติที่จะเพิ่ม VAR ก่อนที่จะสะท้อนและนี่คือจุดประสงค์ของการกล่าวถึง VAR ของเรา
5. ปัญหา Const
[หมายเหตุวิเคราะห์] คำหลัก const ไม่สามารถใช้ใน IE ตัวอย่างเช่น const constvar = 32; ใน IE นี่คือข้อผิดพลาดทางไวยากรณ์
【โซลูชัน】อย่าใช้ const ใช้ var แทน
2. การเข้าถึงสไตล์และการตั้งค่า
1. แอตทริบิวต์ "ลอย" ของ CSS
[หมายเหตุการวิเคราะห์] ไวยากรณ์พื้นฐานที่สุดสำหรับ JavaScript ในการเข้าถึงค่า CSS ที่กำหนดคือ: Object.style.property แต่คุณสมบัติ CSS บางอย่างเหมือนกับชื่อคำที่สงวนไว้ใน JavaScript เช่น "ลอย", "สำหรับ", "คลาส", ฯลฯ และวิธีการเขียน
ใน IE เขียนสิ่งนี้:
การคัดลอกรหัสมีดังนี้:
document.getElementById ("ส่วนหัว"). style.stylefloat = "ซ้าย";
ใน Firefox เขียนสิ่งนี้:
การคัดลอกรหัสมีดังนี้:
document.getElementById ("ส่วนหัว"). style.cssfloat = "ซ้าย";
[การประมวลผลความเข้ากันได้] เพิ่มการตัดสินก่อนที่จะเขียนเพื่อพิจารณาว่าเบราว์เซอร์เป็นเช่น:
การคัดลอกรหัสมีดังนี้:
if (document.all) {//
document.getElementById ("ส่วนหัว"). style.stylefloat = "ซ้าย";
-
else {// undefined เมื่อไม่ได้เช่น
document.getElementById ("ส่วนหัว"). style.cssfloat = "ซ้าย";
-
2. การเข้าถึง "สำหรับ" ในแท็ก <lable>
[หมายเหตุวิเคราะห์] เช่นเดียวกับแอตทริบิวต์ "Float" นอกจากนี้ยังต้องการการใช้ความแตกต่างทางไวยากรณ์ที่มองไม่เห็นเพื่อเข้าถึง "สำหรับ" ในแท็ก <lable>
ใน IE เขียนสิ่งนี้:
การคัดลอกรหัสมีดังนี้:
var myObject = document.getElementById ("myLabel");
var myattribute = myObject.getAttribute ("htmlfor");
ใน Firefox เขียนสิ่งนี้:
การคัดลอกรหัสมีดังนี้:
var myObject = document.getElementById ("myLabel");
var myattribute = myObject.getAttribute ("for");
[การประมวลผลความเข้ากันได้] การแก้ปัญหาคือการกำหนดประเภทเบราว์เซอร์ก่อน
3. การเข้าถึงและตั้งค่าคุณสมบัติคลาส
[หมายเหตุวิเคราะห์] นอกจากนี้เนื่องจากคลาสคือคำที่สงวนไว้ JavaScript เบราว์เซอร์ทั้งสองนี้ใช้วิธี JavaScript ที่แตกต่างกันเพื่อรับคุณสมบัตินี้
วิธีการเขียนทั้งหมด IE เวอร์ชันก่อน IE8.0:
การคัดลอกรหัสมีดังนี้:
var myObject = document.getElementById ("ส่วนหัว");
var myattribute = myObject.getAttribute ("className");
ใช้ได้กับ IE8.0 และ Firefox Writing:
การคัดลอกรหัสมีดังนี้:
var myObject = document.getElementById ("ส่วนหัว");
var myattribute = myObject.getAttribute ("คลาส");
นอกจากนี้เมื่อตั้งค่าแอตทริบิวต์คลาสโดยใช้ setAttribute () เบราว์เซอร์ทั้งสองก็มีความแตกต่างกันเช่นกัน
การคัดลอกรหัสมีดังนี้:
setAttribute ("className", ค่า);
วิธีการเขียนนี้ใช้ได้กับทุกรุ่น IE ก่อน IE8.0 หมายเหตุ: IE8.0 ไม่รองรับแอตทริบิวต์ "classname"
setAttribute ("คลาส", ค่า); เหมาะสำหรับ IE8.0 และ Firefox
【การประมวลผลที่เข้ากันได้】
วิธีที่ 1 เขียนทั้งสอง:
การคัดลอกรหัสมีดังนี้:
var myObject = document.getElementById ("ส่วนหัว");
myObject.setAttribute ("คลาส", "classValue");
myObject.setAttribute ("classname", "classValue");
// ตั้งค่าคลาสส่วนหัวเป็น classValue
วิธีที่ 2: IE และ FF สนับสนุน Object.className ดังนั้นคุณสามารถเขียนได้เช่นนี้:
การคัดลอกรหัสมีดังนี้:
var myObject = document.getElementById ("ส่วนหัว");
myObject.className = "classValue"; // ตั้งค่าคลาสส่วนหัวเป็น classValue
วิธีที่ 3: ตัดสินประเภทเบราว์เซอร์ก่อนจากนั้นใช้วิธีการเขียนที่สอดคล้องกันตามประเภทของเบราว์เซอร์
4. ปัญหาการกำหนดความกว้างและความสูงของวัตถุ
[หมายเหตุการวิเคราะห์] ข้อความที่คล้ายกับ obj.style.height = imgobj.height ใน Firefox ไม่ถูกต้อง
【การประมวลผลที่เข้ากันได้】ใช้ obj.style.height = imgobj.height + 'px';
5. เพิ่มสไตล์
[หมายเหตุวิเคราะห์] ใน IE ใช้วิธี addrule () เพื่อเพิ่มสไตล์เช่น: stylesheet.addrule ("p", "color: #ccc", stylesheet.length) อย่างไรก็ตามวิธีนี้ไม่สามารถใช้งานได้กับ FF และใช้เมธอด InsetRule () เพื่อแทนที่ใน FF เช่น stylesheet.insertrule ("p {color: #ccc}", stylesheet.length)
【การประมวลผลที่เข้ากันได้】
การคัดลอกรหัสมีดังนี้:
if (stylesheet.insertrule) {
// insertrule () วิธีการ
}อื่น{
// addrule () วิธีการ
-
6. สไตล์สุดท้าย
[หมายเหตุวิเคราะห์] บางครั้งรูปแบบที่กำหนดเองของเราจะล้มเหลวเนื่องจากการซ้อนทับสไตล์เกิดขึ้นเช่นสไตล์ที่กำหนดโดยตัวเลือกคลาสและสไตล์ที่กำหนดโดยตัวเลือกฉลากและหลังไม่ถูกต้องในเวลานี้ จากนั้นจะต้องใช้สไตล์สุดท้าย รูปแบบสุดท้ายใน IE เขียนเป็น Ele.currentstyle ชื่อแอตทริบิวต์ วิธีการเขียนมาตรฐานใน DOM คือการใช้ document.defaultView วัตถุเช่น document.defaultView.getComputedStyle (ELEL, NULL) ซึ่งเข้ากันได้กับ FF
[การประมวลผลความเข้ากันได้] ก่อนตัดสินเบราว์เซอร์ (document.all) จากนั้นดำเนินการวิธีการข้างต้น
3. วิธีการ DOM และการอ้างอิงวัตถุ
1. GetElementById
[คำแนะนำการวิเคราะห์] ลองดูชุดรหัส:
<!-อินพุตออบเจ็กต์การเข้าถึง 1->
การคัดลอกรหัสมีดังนี้:
<input id = "id" type = "ปุ่ม"
value = "คลิกฉัน" ōnclick = "การแจ้งเตือน (id.value)"/>
ใน Firefox ปุ่มไม่ตอบสนองใน IE ไม่เป็นไรเพราะ IE ID ขององค์ประกอบ HTML สามารถใช้โดยตรงเป็นชื่อตัวแปรในสคริปต์ แต่ไม่ใช่ใน Firefox
[การประมวลผลความเข้ากันได้] พยายามใช้การเขียน W3C DOM เมื่อเข้าถึงวัตถุให้ใช้ document.getElementById ("ID") เพื่อเข้าถึงวัตถุด้วย ID และ ID จะต้องไม่ซ้ำกันในหน้า นอกจากนี้เมื่อเข้าถึงวัตถุด้วยชื่อแท็กให้ใช้ document.getElementsByTagname ("div") [0] วิธีนี้ได้รับการสนับสนุนโดยเบราว์เซอร์เพิ่มเติม
<!-อินพุตออบเจ็กต์การเข้าถึง 2->
การคัดลอกรหัสมีดังนี้:
<input id = "id" type = "ปุ่ม" value = "คลิกฉัน"
onclick = "Alert (document.getElementById ('id'). ค่า)" />>
2. การเข้าถึงวัตถุคลาสคอลเลกชัน
[หมายเหตุวิเคราะห์] ภายใต้ IE คุณสามารถใช้ () หรือ [] เพื่อรับวัตถุคลาสคอลเลกชัน; ภายใต้ Firefox คุณสามารถใช้ [] เพื่อรับวัตถุคลาสคอลเลกชัน ชอบ:
document.write (document.forms ("formname"). src);
// วิธีการเขียนนี้สามารถเข้าถึงแอตทริบิวต์ SCRC ของวัตถุแบบฟอร์มภายใต้ IE
【การประมวลผลความเข้ากันได้】เปลี่ยน document.forms ("formName") เป็น document.forms ["formName"] ใช้ [] เพื่อรับวัตถุคลาสคอลเลกชันในลักษณะที่เป็นเอกภาพ
3. การอ้างอิงของเฟรม
[หมายเหตุการวิเคราะห์] IE สามารถเข้าถึงวัตถุหน้าต่างที่สอดคล้องกับเฟรมนี้ผ่าน ID หรือชื่อในขณะที่ Firefox สามารถเข้าถึงวัตถุหน้าต่างที่สอดคล้องกับเฟรมนี้ผ่านชื่อเท่านั้น
ตัวอย่างเช่นหากแท็กเฟรมด้านบนเขียนใน HTM ในหน้าต่างบนสุดคุณสามารถเข้าถึงได้เช่นนี้:
เช่น: window.top.frameid หรือ window.top.frameName เพื่อเข้าถึงวัตถุหน้าต่างนี้;
Firefox: Only Window.top.frameName สามารถใช้เพื่อเข้าถึงวัตถุหน้าต่างนี้
【การประมวลผลที่เข้ากันได้】ใช้ชื่อเฟรมเพื่อเข้าถึงวัตถุเฟรม นอกจากนี้ทั้ง IE และ Firefox สามารถใช้ทำ
window.document.getElementById ("frameid") เพื่อเข้าถึงวัตถุเฟรมนี้
4. Parentelement
[คำอธิบายการวิเคราะห์] IE รองรับการใช้ ParentElement และ ParentNode เพื่อรับโหนดหลัก Firefox สามารถใช้ ParentNode เท่านั้น
[การประมวลผลความเข้ากันได้] เนื่องจากทั้ง Firefox และ IE สนับสนุน DOM, ParentNode ใช้เพื่อเข้าถึงโหนดพาเรนต์
5. การทำงานของตาราง
[หมายเหตุการวิเคราะห์] ในตารางภายใต้ IE ไม่ว่าจะถูกแทรกด้วย innerhtml หรือภาคผนวกมันไม่มีผล แต่เบราว์เซอร์อื่น ๆ จะแสดงตามปกติ
[การประมวลผลที่เข้ากันได้] การแก้ปัญหาคือการเพิ่ม <tr> ในองค์ประกอบ <tbody> ของตารางดังที่แสดงด้านล่าง:
การคัดลอกรหัสมีดังนี้:
var row = document.createElement ("tr");
var cell = document.createElement ("TD");
var cell_text = document.createTextNode ("เนื้อหาแทรก");
cell.appendchild (cell_text);
row.appendchild (เซลล์);
document.getElementByTagname ("tbody") [0] .AppendChild (แถว);
6. ลบโหนด Removenode () และ RemoveChild ()
[หมายเหตุวิเคราะห์] ภาคผนวกสามารถใช้งานได้ตามปกติใน IE และ Firefox แต่สามารถใช้งานได้ใน IE เท่านั้น
ฟังก์ชั่นของวิธีการที่ Removenode คือการลบโหนดโดยที่ไวยากรณ์เป็น node.removenode (false) หรือ node.removenode (จริง) และค่าส่งคืนเป็นโหนดที่ถูกลบ
Removenode (เท็จ) หมายความว่าเฉพาะโหนดที่ระบุจะถูกลบและจากนั้นโหนดลูกดั้งเดิมของโหนดนี้จะได้รับการส่งเสริมให้เป็นโหนดลูกของโหนดพาเรนต์ดั้งเดิม
Removenode (จริง) หมายถึงการลบโหนดที่ระบุและโหนดรองทั้งหมด โหนดที่ถูกลบกลายเป็นโหนดเด็กกำพร้าและไม่มีโหนดลูกและโหนดพาเรนต์อีกต่อไป
[การประมวลผลความเข้ากันได้] โหนดใน Firefox ไม่มีวิธีการลบออกดังนั้นพวกเขาจึงสามารถแทนที่ได้ด้วยวิธีการลบล้าง ก่อนอื่นกลับไปที่โหนดพาเรนต์และลบโหนดที่จะลบออกจากโหนดพาเรนต์
Node.ParentNode.removeChild (Node);
// เพื่อที่จะใช้ทั้ง IE และ Firefox โดยปกติให้ใช้โหนดหลักของเลเยอร์ก่อนหน้าแล้วลบออก
7. โหนดที่ได้รับจากเด็ก
[หมายเหตุการวิเคราะห์] ความหมายของตัวห้อยเด็กนั้นแตกต่างกันใน IE และ Firefox มาดูรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<ul id = "หลัก">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<อินพุตประเภท = button value = "คลิกฉัน!" onclick =
"Alert (document.getElementById ('Main'). ChildNodes.Length)">>
การทำงานกับ IE และ Firefox ตามลำดับผลลัพธ์ของ IE คือ 3 ในขณะที่ Firefox คือ 7. Firefox ใช้ข้อกำหนด DOM และ "#Text" หมายถึงข้อความ (จริง ๆ ใน IE ข้อความที่มีความหมายเชิงปฏิบัติเท่านั้นที่จะแยกวิเคราะห์เป็น "#text"
【การประมวลผลที่เข้ากันได้】
วิธีที่ 1: เมื่อได้รับโหนดลูกคุณสามารถหลีกเลี่ยงปัญหานี้ได้ด้วย node.getElementsByTagname () อย่างไรก็ตาม GetElementsByTagname นั้นไม่ดีเท่าการใช้ ChildNodes สำหรับการสำรวจโครงสร้าง DOM ที่ซับซ้อนเนื่องจากเด็กสามารถจัดการกับลำดับชั้นของ DOM ได้ดีขึ้น
วิธีที่ 2 ในการใช้งานจริงเมื่อ Firefox ผ่านโหนดเด็กคุณอาจเพิ่มลงในลูป:
ถ้า (childNode.nodename == "#text") ดำเนินการต่อ; // หรือใช้ nodetype == 1
สิ่งนี้ช่วยให้คุณสามารถข้ามโหนดข้อความได้
การอ่านเพิ่มเติม
"ความแตกต่างระหว่างเด็กใน IE และ Firefox"
8. Firefox ไม่สามารถรองรับ InnerText
[หมายเหตุการวิเคราะห์] Firefox ไม่สนับสนุน InnerText มันรองรับ TextContent เพื่อใช้งานข้อความ innerText แต่ TextContent ไม่ได้พิจารณาองค์ประกอบเช่น innerText ดังนั้นจึงไม่สามารถใช้งานได้อย่างสมบูรณ์กับ IE หากคุณไม่ได้ใช้ TextContent สตริงจะไม่มีรหัส HTML ซึ่งสามารถแทนที่ด้วย InnerHTML นอกจากนี้คุณยังสามารถเขียนวิธีการใช้งานได้โปรดดูบทความ "การใช้แอตทริบิวต์ InnerText สำหรับ Firefox"
【เปรียบเทียบการประมวลผล】เปรียบเทียบโดยการตัดสินประเภทเบราว์เซอร์:
การคัดลอกรหัสมีดังนี้:
if (document.all) {
document.getElementById ('องค์ประกอบ'). innerText = "ข้อความของฉัน";
} อื่น{
document.getElementById ('องค์ประกอบ'). textContent = "ข้อความของฉัน";
-
4. การจัดการเหตุการณ์
หากการประมวลผลเหตุการณ์มีส่วนเกี่ยวข้องเมื่อใช้ JavaScript คุณต้องทราบความแตกต่างระหว่างเหตุการณ์ในเบราว์เซอร์ที่แตกต่างกัน มีสามโมเดลเหตุการณ์ JavaScript หลัก (ดู "สนับสนุนสามรุ่นเหตุการณ์ในครั้งเดียว" ซึ่ง ได้แก่ NN4, IE4+ และ W3C/Safar
1. window.event
【คำแนะนำการวิเคราะห์】ดูที่รหัสหนึ่งก่อน
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น ET ()
-
Alert (Event); // IE: [Object]
-
ผลลัพธ์ของรหัสข้างต้นที่ทำงานอยู่ใน IE คือ [วัตถุ] แต่ไม่สามารถทำงานใน Firefox ได้
เนื่องจากเหตุการณ์สามารถใช้โดยตรงเป็นคุณสมบัติของวัตถุหน้าต่างใน IE แต่ใน Firefox แบบจำลอง W3C ถูกใช้ซึ่งเผยแพร่เหตุการณ์ผ่านวิธีการผ่านพารามิเตอร์นั่นคือคุณต้องจัดเตรียมอินเทอร์เฟซตอบสนองเหตุการณ์สำหรับฟังก์ชั่นของคุณ
[การประมวลผลความเข้ากันได้] เพิ่มการตัดสินของเหตุการณ์และรับเหตุการณ์ที่ถูกต้องตามเบราว์เซอร์:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น ET ()
-
evt = evt? evt: (window.event? window.event: null);
// เข้ากันได้กับ IE และ Firefox
การแจ้งเตือน (EVT);
-
2. การได้มาของค่าคีย์บอร์ด
[หมายเหตุวิเคราะห์] วิธีการรับค่าแป้นพิมพ์จาก IE และ Firefox นั้นแตกต่างกัน สามารถเข้าใจได้ว่าเหตุการณ์ที่อยู่ภายใต้ Firefox นั้นเทียบเท่ากับเหตุการณ์ KEYCODE ภายใต้ IE สำหรับความแตกต่างของกันและกันโปรดดูที่ "การทดสอบความเข้ากันได้สำหรับ KYCODE ซึ่งและ charcode ในเหตุการณ์แป้นพิมพ์"
【การประมวลผลที่เข้ากันได้】
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น mykeypress (evt) {
// เข้ากันได้กับ IE และ Firefox เพื่อรับ KeyboardEvent Object
evt = (evt)? evt: ((window.event)? window.event: "")
// เข้ากันได้กับ IE และ Firefox เพื่อรับค่าคีย์ของวัตถุ KeyboardEvent
var key = evt.keycode? evt.keycode: evt.which;
if (evt.ctrlkey && (key == 13 || key == 10)) {
// ctrl และ Enter ถูกกดในเวลาเดียวกัน
// ทำอะไรบางอย่าง;
-
-
3. การรับแหล่งเหตุการณ์
[หมายเหตุการวิเคราะห์] เมื่อใช้ผู้แทนเหตุการณ์เราสามารถกำหนดองค์ประกอบที่เหตุการณ์มาจากการได้มาของแหล่งที่มาของเหตุการณ์ อย่างไรก็ตามใน IE วัตถุเหตุการณ์มีคุณสมบัติ SRCELEMENT แต่ไม่มีคุณสมบัติเป้าหมาย ใน Firefox วัตถุที่สม่ำเสมอมีคุณสมบัติเป้าหมาย แต่ไม่มีคุณสมบัติ srcelement
【การประมวลผลที่เข้ากันได้】
การคัดลอกรหัสมีดังนี้:
ele = function (evt) {// จับภาพวัตถุที่เหตุการณ์ปัจจุบันทำหน้าที่
evt = evt || window.event;
กลับ
(obj = event.srcelement? event.sreclement: Event.target;);
-
4. การตรวจสอบเหตุการณ์
[หมายเหตุการวิเคราะห์] ในแง่ของการฟังเหตุการณ์และการประมวลผล IE ให้สองอินเทอร์เฟซ: AttachEvent และ Detachevent ในขณะที่ Firefox ให้ AddEventListener และ RemoveVentListener
[การประมวลผลความเข้ากันได้] การประมวลผลความเข้ากันได้ที่ง่ายที่สุดคือการห่อหุ้มอินเตอร์เฟสทั้งสองชุดนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น addevent (elem, eventname, handler) {
if (elem.attachevent) {
elem.attachevent ("on" + eventname, function () {
handler.call (elem)});
// ใช้การเรียกใช้ฟังก์ชันการโทรกลับ () ที่นี่ให้จุดนี้ไปที่ elem
} อื่นถ้า (elem.addeventListener) {
Elem.addeventListener (EventName, Handler, False);
-
-
ฟังก์ชั่น remverevent (elem, eventname, handler) {
if (elem.detachevent) {
elem.detachevent ("on" + eventname, function () {
handler.call (elem)});
// ใช้การเรียกใช้ฟังก์ชันการโทรกลับ () ที่นี่ให้จุดนี้ไปที่ elem
} อื่นถ้า (elem.removeeVentListener) {
Elem.removeeVentListener (EventName, Handler, False);
-
-
ควรสังเกตว่าภายใต้ Firefox สิ่งนี้ในฟังก์ชั่นการจัดการเหตุการณ์ชี้ไปที่องค์ประกอบที่ฟังเอง แต่ใน IE คุณสามารถใช้การเรียกใช้ฟังก์ชันการเรียกกลับเพื่อให้บริบทปัจจุบันชี้ไปที่องค์ประกอบที่ฟัง
5. ตำแหน่งเมาส์
[หมายเหตุการวิเคราะห์] ภายใต้ IE วัตถุคู่มีแอตทริบิวต์ X และ Y แต่ไม่มีแอตทริบิวต์ PAGEX และ PAGEY; ภายใต้ Firefox วัตถุคู่มีแอตทริบิวต์ PAGEX และ PAGEY แต่ไม่มีแอตทริบิวต์ X และ Y
[การประมวลผลความเข้ากันได้] ใช้ MX (mx = event.x? event.x: event.pagex;) เพื่อแทนที่ event.x ภายใต้ IE หรือ event.pagex ภายใต้ Firefox ตำแหน่งสัมบูรณ์จะต้องพิจารณาในจุดที่ซับซ้อน
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getAbspoint (e) {
var x = e.offsetleft, y = e.offsettop;
ในขณะที่ (e = e.offsetParent) {
x += e.offsetleft;
y += e.offsettop;
-
การแจ้งเตือน ("x:" + x + "," + "y:" + y);
-
5. การรักษาความเข้ากันได้ของความแตกต่างอื่น ๆ
1. xmlhttprequest
[หมายเหตุวิเคราะห์] ใหม่ ActiveXObject ("Microsoft.xmlhttp"); ใช้งานได้เฉพาะใน IE Firefox ไม่รองรับ แต่รองรับ XMLHTTPREQUEST
【การประมวลผลที่เข้ากันได้】
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น createxhr () {
var xhr = null;
if (window.xmlhttprequest) {
xhr = new ActiveXObject ("msxml2.xmlhttp");
}อื่น{
พยายาม {
XHR = ใหม่ ActiveXObject ("Microsoft.xmlhttp");
-
จับ() {
xhr = null;
-
-
ถ้า (! xhr) กลับมา;
กลับ XHR;
-
2. หน้าต่างแบบโมดอลและไม่ใช่โมดอล
[หมายเหตุการวิเคราะห์] ใน IE หน้าต่างโมดอลและไม่ใช่โมดอลสามารถเปิดได้ผ่าน showmodaldialog และ showmodelessDialog แต่ Firefox ไม่รองรับพวกเขา
[โซลูชัน] ใช้ window.open (หน้า, ชื่อ, พารามิเตอร์) เพื่อเปิดหน้าต่างใหม่ หากคุณต้องการผ่านพารามิเตอร์คุณสามารถใช้เฟรมหรือ iframe
3. ปัญหาแอตทริบิวต์อินพุต
คุณสมบัติ input.type ภายใต้ IE เป็นแบบอ่านอย่างเดียว แต่สามารถแก้ไขได้ภายใต้ Firefox
4. การดำเนินการตัวเลือกบนองค์ประกอบที่เลือก
ตั้งค่าตัวเลือกเช่นและ firefox ที่แตกต่างกัน:
Firefox: สามารถตั้งค่าได้โดยตรง
การคัดลอกรหัสมีดังนี้:
ตัวเลือก text = 'fooooooooo';
เช่น: ชุดเท่านั้น
การคัดลอกรหัสมีดังนี้:
Option.innerhtml = 'fooooooo';
วิธีการลบตัวเลือกเลือก:
Firefox: ใช่
การคัดลอกรหัสมีดังนี้:
select.options.remove (SelectedIndex);
IE7: สามารถใช้งานได้
การคัดลอกรหัสมีดังนี้:
select.options [i] = null;
IE6: ต้องเขียน
การคัดลอกรหัสมีดังนี้:
select.options [i] .outerhtml = null;
5. การวิเคราะห์วัตถุ IMG alt และ title
[หมายเหตุการวิเคราะห์] วัตถุ IMG มีสองแอตทริบิวต์: alt และ title ความแตกต่างคือ ALT: พรอมต์เมื่อไม่มีภาพถ่ายหรือโหลดไม่ถูกต้อง
ชื่อเรื่อง: คำอธิบายเคล็ดลับของภาพถ่าย หากชื่อไม่ได้กำหนดไว้ใน IE สามารถใช้ ALT เป็นส่วนปลายของ IMG ได้ แต่ใน Firefox ทั้งคู่จะถูกใช้อย่างแน่นอนตามคำจำกัดความในมาตรฐาน
เมื่อกำหนดวัตถุ IMG
[การประมวลผลที่เข้ากันได้] เป็นการดีที่สุดที่จะเขียนวัตถุ Alt และชื่อเรื่องทั้งหมดเพื่อให้แน่ใจว่าสามารถใช้งานได้ตามปกติในเบราว์เซอร์ต่างๆ
6. ปัญหาการรีเฟรช SRC ของ IMG
[คำแนะนำการวิเคราะห์] มาดูรหัสก่อน:
การคัดลอกรหัสมีดังนี้:
<img id = "pic" onclick = "this.src = 'a.jpg'" src = "aa.jpg" style = "เคอร์เซอร์: ตัวชี้"/>>
ภายใต้ IE รหัสนี้สามารถใช้เพื่อรีเฟรชภาพ แต่ไม่ใช่ภายใต้ Firefox ส่วนใหญ่เป็นปัญหาการแคช
[การประมวลผลความเข้ากันได้] การเพิ่มหมายเลขสุ่มหลังจากที่อยู่จะแก้ปัญหา:
การคัดลอกรหัสมีดังนี้:
<img id = "pic" onclick = "JavaScript: this.src = this.src+'?'+math.random ()" src = "a.jpg" style = "เคอร์เซอร์: ตัวชี้"/>>
สรุป
มีความแตกต่างมากมายใน JavaScript ระหว่าง IE และ Firefox เพื่อให้เข้ากันได้ฉันคิดว่ามันจำเป็นที่จะต้องจัดระเบียบบางอย่างทั่วไปลงในห้องสมุด JS เช่นการดำเนินงาน DOM การประมวลผลเหตุการณ์การร้องขอ XMLHTTPRequest ฯลฯ หรือคุณสามารถเลือกใช้ห้องสมุดที่มีอยู่ (เช่น JQuery, Yui, Extjs ฯลฯ ) อย่างไรก็ตามฉันคิดว่ามันยังจำเป็นที่จะต้องเข้าใจความแตกต่างเหล่านี้ซึ่งมีประโยชน์มากสำหรับเราในการเข้าร่วมในความเข้ากันได้และรหัสการใช้งาน
มีวิธีแก้ปัญหามากกว่าปัญหาเสมอ ไม่ว่าเบราว์เซอร์จะเข้ากันได้อย่างไรการพัฒนาส่วนหน้าสามารถแก้ไขได้เสมอ!