この記事では、IEおよびFirefoxブラウザのJavaScriptの一般的な互換性の問題をまとめて分析します。次のように、参照のために共有してください。
形状
document.formname.item( "itemname")
IE:document.formname.item( "itemname")またはdocument.formname.elements ["elementname"]を使用できます。
firefox:only document.formname.elements ["elementname"]]
解決策:document.formname.elements ["elementname"]を使用
コレクションクラスオブジェクト
IE:()または[]を使用してコレクションクラスオブジェクトを取得できます。
Firefox:[]のみを使用して、クラスオブジェクトをコレクションを取得します。
解決策:[]を使用して、統一された方法でコレクションクラスオブジェクトを取得します。
カスタムプロパティ
IE:通常の属性を取得してカスタム属性を取得する方法を使用するか、getattribute()を使用してカスタム属性を取得できます
Firefox:getattribute()のみを使用してカスタムプロパティを取得できます。
解決策:getattribute()を介してカスタム属性を均一に取得します。
要素の獲得
eval( "idname")
IE:eval( "idname")またはgetElementById( "idname")を使用して、idnameを使用してHTMLオブジェクトを取得できます。
Firefox:getElementById( "IDNAME")のみを使用して、idNameを使用してIDNAMEを使用してHTMLオブジェクトを取得できます。
解決策:getElementByID( "IDNAME")を使用して、IDNAMEとしてIDを使用してHTMLオブジェクトを取得します。
重複した命名
特定のHTMLオブジェクトIDと同じ変数名の問題
IE:HTMLオブジェクトのIDは、ドキュメントの下位オブジェクトの変数名として直接使用できますが、Firefoxでは使用できません。
Firefox:HTMLオブジェクトIDと同じ変数名を使用できますが、IEではできません。
回避策:document.idnameの代わりにdocument.getElementByID( "idname")を使用します。エラーを減らすために同じHTMLオブジェクトIDを使用して変数名を取得しないことが最善です。変数を宣言するときは、曖昧さを避けるためにvarを追加します。
const
IE:VARキーワードのみを使用して変数を定義します。
Firefox:constキーワードまたはvarキーワードを使用して、変数を定義できます。
解決策:VARキーワードを使用して、変数を均一に定義します。
input.type
input.Type属性の問題
IE:input.type属性は読み取り専用です。
Firefox:input.type属性は読み取りおよび書き込みです。
window.event
window.eventは、FirefoxではなくIEの下でのみ実行できます。これは、Firefoxイベントはイベントが発生するシーンでのみ使用できるためです。
Firefox:パラメーターの合格のソースからイベントを追加する必要があります。 IEはこのパラメーターを無視し、window.eventを使用してイベントを読み取ります。
解決:
<スクリプト言語= "javascript"> function fun(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.srcelement
IE:イベントオブジェクトにはsrcelementプロパティがありますが、ターゲットプロパティはありません。
Firefox:オブジェクトでさえターゲットプロパティを持っていますが、srcelementプロパティはありません。
解決策:obj(obj = event.srcelement?event.srcelement:event.target;)event.srcelementの代わりにieまたはevent.targetを使用します。イベントの互換性の問題にも注意してください。
window.location.href
IEまたはfirefox2.0.x:window.locationまたはwindow.location.hrefを使用できます。
firefox1.5.x:Window.locationのみが使用されます
回避策:window.location.hrefの代わりにwindow.locationを使用します。
モーダルと非モーダルのウィンドウ
IE:モーダルと非モーダルのウィンドウは、showmodaldialogおよびshowmodelessdialogを介して開くことができます
Firefox:いいえ!
解決策:window.open(pageurl、name、parameters)を使用して、新しいウィンドウを開きます。
子ウィンドウのパラメーターを親ウィンドウに戻す必要がある場合は、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; //関数Inject()は、この前に実装されています
Firefox:コードコピーは次のとおりです。document.body.onload= inject();
親要素
FirefoxとIE Parent Element(ParentElement)の違い
IE:obj.parentelement
Firefox:obj.parentnode
解決策:FirefoxとIEの両方がDOMをサポートするため、obj.parentnodeを使用することは良い選択です。
マウスポインターカーソル
カーソル:ハンド対カーソル:ポインター
Firefox:手はサポートされていません
IE:ポインターをサポートします
解決策:ポインターを均一に使用します
コンテンツテキスト
Innertextは通常、IEで動作します。ただし、InnertextはFirefoxでは機能しません。TextContentが必要です。
解決:
if(navigator.appname.indexof( "explorer")> -1){document.getElementById( 'element')。innertext = "my text"; } else {document.getElementById( 'element')。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(Cell);
オプションコレクション
選択のオプションコレクションの操作
[]に加えて、selectname.options.item()も可能です。さらに、selectname.options.length、selectname.options.add/removeは両方のブラウザーで使用できます。
*追加後に要素が割り当てられていることに注意してください。そうしないと、失敗します。
xmlhttp
if(window.xmlhttprequest){xmlhttp = new xmlhttprequest(); } else if(window.activexobject){// ie xmlhttp = new ActiveXObject( "microsoft.xmlhttp"); } if(xmlhttp){xmlhttp.onreadystatechange = xmlhttpchange; xmlhttp.open( "get"、url、true); xmlhttp.send(); }JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください:「JavaScriptエラーとデバッグスキルの要約」、「JavaScriptの数学的操作の使用の概要」、「JavascriptのJSON操作スキルの要約」、「Javascript Switching Special Effects and Skillsの要約」、Javascript Search algorithm section "summation" summation "summation" sumprice "sumprice" sumprict algorithm algorithm algorithm algorithmのスキルの概要スキル」、「JavaScriptデータ構造とアルゴリズムスキルの要約」および「JavaScriptトラバーサルアルゴリズムとスキルの概要」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。