1。要素検索の問題
1。document.all [name]
(1)既存の問題:Firefoxはdocument.all [名前]をサポートしていません
(2)解決策:getElementsByname(name)、getElementById(ID)などを使用して置き換えます。
2。コレクションオブジェクトの問題
(1)既存の問題:IEは、多くのコレクションクラスオブジェクトを使用するときに()を使用できますが、[]のみをFirefoxで使用できます。
たとえば、IEでは、document.forms( "formname")を使用して、「formname」という名前のフォームを返すことができますが、Firefoxでは機能しません。
(2)解決策:[]を使用して、上記の例では、document.forms ["formname"]に変更できます。
3.HTML要素のIDはJavaScriptに表示されます
(1)既存の問題:IEのHTML要素のIDは、ドキュメントの下位オブジェクトの変数名として直接使用できます。 Firefoxでは利用できません。
(2)解決策:IDNAMEの代わりに、getElementByID( "idname")をオブジェクト変数として使用します。
4。eval(idname)オブジェクトを取得します
(1)既存の問題:IEでは、eval(idname)を使用することで、IDNameでHTMLオブジェクトを取得できますが、Firefoxでは使用できません。
(2)解決策:eval(idname)の代わりにgetelementbyid(idname)を使用します。
5.変数名はHTMLオブジェクトIDと同じです
(1)既存の問題:Firefoxでは、オブジェクトIDはHTMLオブジェクトの名前ではないため、IEで使用できないHTMLオブジェクトIDと同じ変数名を使用できます。
(2)解決策:変数を宣言する場合、varを追加してあいまいさを避け、IEでも正常に実行できるようにします。さらに、エラーを減らすためにHTMLオブジェクトIDと同じ変数名を取得しないことが最善です。
注:3、4、5はすべて、同じカテゴリの問題に属します。
6。フレーム
(1)既存の問題:IEでは、window.top.frameid and window.top.framenameを使用して、フレームで表されるウィンドウを取得できます。 windop.top.framenameのみをFirefoxで使用できます。
(2)解決策:フレームのIDと名前を同じに設定し、window.top.framenameを使用してフレームにアクセスします。
2。DOM操作
1.要素のテキストコンテンツを設定します。
(1)既存の問題:IEはInnerTextを使用し、FirefoxはTextContentを使用して要素テキストコンテンツを設定します。
(2)解決策:テキストコンテンツに「<」や「>」などの特殊文字が含まれていない場合、innerhtmlを使用できます。それ以外の場合は、以下を使用できます。
var child = elem.firstchild; if(child!= null)elem.removechild(child); Elem.AppendChild(document.createTextNode(content));
2。ParentElement、Parent.Children
(1)既存の問題:IEは親のノードを取得するためにParentElementを使用でき、親子はすべての子供ノードのノードを取得できます。 Firefoxはそれをサポートしていません。
(2)解決策:ParentNodeとParent.ChildNodesを使用します。
3。子供のノードの説明。
(1)既存の問題:IEとFirefoxの子育ての説明は異なります。 IEには空白のテキストノードは含まれませんが、Firefoxには含まれます。
(2)解決策:次のように、チャイルドノードを使用してテキストノードをフィルタリングします。
var children = elem.childnodes; for(i = 0; i <children.length; i ++){if(children [i] .nodetype!= 3){//テキストノード// ...}}}4。document.getElementsbynameの説明。
(1)既存の問題:IEのgetElementsBynameは、<input>および<img>要素のみをチェックしますが、すべての要素はFirefoxの下でチェックされます。
(2)解決策:getElementsBynameを使用して、<inupt>および<img>以外の要素を確認しないでください。単一の要素を取得する場合は、getElementByIDを使用してみてください。
5。document.getElementByIDの説明。
(1)既存の問題:IEのGetElementByIDは、ID属性をチェックするだけでなく、名前属性をチェックします。この要素は、名前属性がパラメーターと一致するときにも返されます。 Firefoxでは、ID属性のみがチェックされます。
(2)解決策:IDを保持して同じ名前を付けて、1つの要素の名前属性と別の要素の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で実行できます):
<入力型= "button" name = "somebutton" value = "" onclick = "javascript:gotosubmit()"/> ... <スクリプト言語= "javascript"> function gotosubmit(){... altert.event); // window.event ...} </script>を使用します新しいコード(IEとFirefoxで実行できます):
<入力型= "button" name = "somebutton" value = "" inclick = "javascript:gotosubmit(event)"/> ... <スクリプト言語= "javascript"> function gotosubmit(evt){evt = evt? evt :( window.event?window.event:null); ...アラート(evt); // evt ...} </script>を使用します3。AttachEventおよびAddEventListener
(1)既存の問題:IEはactibleEventを使用してイベントを追加し、FirefoxはAddEventListenerを使用します。
(2)解決策:次のように、イベントパラメーターの違いに注意してください。1つはクリックし、もう1つはオンクリックです。
if(document.attachevent)document.attachevent( "click"、clickhandler、false);
else 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 = new xmlhttprequest(); } else if(window.activexobject){req = new ActiveXObject( "microsoft.xmlhttp"); }2。DOMを作成します
(1)既存の問題:FirefoxとIEはDOMを異なる方法で作成します。
(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文字列をさまざまな方法でロードします。 IEでは、oxmldom.loadxml( "<root> <child/> </root>")を直接使用できますが、Firefoxはdomparserを使用する必要があります。
var oparser = new domparser();
var oxmldom = oparser.parsefromstring( "<root/>"、 "text/xml");
(2)解決策:より良い方法は、Firefoxによって生成されたXMLDOMにLoadXMLメソッドを追加することです。
if(isfirefox){//ブラウザ検出が必要です
document.prototype.loadxml = function(sxml){var oparser = new domparser(); var oxmldom = oparser.parsefromstring(sxml、 "text/xml"); while(this.firstchild)this.removechild(this.firstchild); for(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では、XMLDOMのSelectNodesを使用して、XPATH表現に基づいてノードを選択できます。 Firefoxはより複雑で、Xpathevaluatorの使用が必要です。
つまり:
var lstnodes = oxmldom.documentelement.selectnodes( "Employee/name"); for(var i = 0; i <lstnodes.length; i ++){alert(lstnodes [i] .firstchild.nodevalue); }Firefox:
var oevaluator = new Xpathevaluator(); var oresult = oevaluator.evaluate( "Employee/name"、oxmldom.documentelement、null、xpathresult.Ordered_node_iterator_type、null); var oelement = oresult.iteratenext(); while(oElement){alert(oelement.firstchild.nodevalue); oElement = oresult.iteratenext(); }(2)解決策:Firefoxの要素にSelectNodesメソッドを追加するためのより良い方法。
if(isfirefox){//ブラウザは要素を検出する必要があります。prototype.selectnodes= function(sxpath){var oevaluator = new Xpathevaluator(); var oresult = oevaluator.evaluate(sxpath、this、null、xpathresult.ordered_node_iterator_type、null); var anodes = new Array(); if(oresult!= null){var oelement = oresult.iteratenext(); while(oElement){anodes.push(oElement); oElement = oresult.iteratenext(); }} Anodesを返します。 }}このようにして、SelectNodesメソッドはIEとFirefoxの両方で呼び出すことができます。
5。XSLTサポート
(1)既存の問題:IEでは、XMLDOMのTransferNodeメソッドを使用してHTMLに変換できますが、FirefoxはXSLTProcessorを使用する必要があります。
つまり:
oxmldom.load( "Employee.xml"); oxsldom.load( "Employee.xslt"); var sresult = oxmldom.transformnode(oxsldom);
Firefox:
var oprocessor = new xsltprocessor(); oprocessor.importstylesheet(oxsldom); var oresultdom = oprocessor.transformtodocument(oxmldom); var oserializer = new XmlSerializer(); var sxml = aserializer.serializetostring(oresultdom、 "text/xml");アラート(SXML);
(2)解決策:Firefoxのノードに転送ノードメソッドを追加するより良い方法。
if(isfirefox){//ブラウザはnode.prototype.transformnode = function(oxsldom){var oprocessor = new XSLTProcessor(); oprocessor.importstylesheet(oxsldom); var oresultdom = oprocessor.transformtodocument(oxmldom); var oserializer = new XmlSerializer(); var sxml = aserializer.serializetostring(oresultdom、 "text/xml"); SXMLを返します。 }}このようにして、TransferNodeメソッドはIEとFirefoxの両方で呼び出すことができます。
上記は、ブラウザ互換のJSライティング方法の要約です。すべての人の学習に役立つことを願っています。