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では、[]を使用してCollectionクラスオブジェクトを取得できます。
解決策:[]を使用して、統一された方法でコレクションクラスオブジェクトを取得します。
3。カスタム属性の問題
問題の説明:IEでは、通常の属性を取得してカスタム属性を取得する方法を使用するか、getattribute()を使用してカスタム属性を取得できます。 Firefoxでは、getattribute()のみを使用してカスタム属性を取得できます。
回避策:getattribute()を介してカスタム属性を均一に取得します。
4。評価( "idname")問題
問題の説明:IEでは、eval( "idname")またはgetElementbyid( "idname")を使用して、idnameでHTMLオブジェクトを取得できます。 Firefoxでは、getElementById( "IDNAME")のみを使用して、IDNameを使用してHTMLオブジェクトを取得できます。
解決策:getElementByID( "IDNAME")を使用して、IDNAMEとしてIDを使用してHTMLオブジェクトを取得します。
5.変数名の問題と特定のHTMLオブジェクトのID
問題の説明:IEでは、HTMLオブジェクトのIDは、ドキュメントの下位オブジェクトの変数名として直接使用できますが、Firefoxでは使用できません。 Firefoxでは、HTMLオブジェクトIDと同じ変数名を使用できますが、IEでは使用できません。
回避策:document.idnameの代わりにdocument.getElementByID( "idname")を使用します。エラーを減らすために同じHTMLオブジェクトIDを使用して変数名を取得しないことが最善です。変数を宣言するときは、曖昧さを避けるためにVARキーワードを追加します。
6。const Issue
問題の説明:Firefoxでは、constキーワードまたはvarキーワードを使用して定数を定義できます。 IEでは、VARキーワードを使用して定数を定義できます。
解決策:VARキーワードを使用して、定数を均一に定義します。
7。input.type属性の問題
問題の説明:IEに基づく入力.Typeプロパティは読み取り専用です。ただし、Firefoxの下のinput.typeプロパティは読み取りされています。
解決策:input.typeプロパティを変更しないでください。変更する必要がある場合は、最初に元の入力を非表示にしてから、同じ位置に新しい入力要素を挿入できます。
8。window.eventの問題
問題の説明:window.eventは、FirefoxではなくIEでのみ実行できます。Firefoxイベントは、イベントが発生するシーンでのみ使用できるためです。
解決策:イベントが発生する関数にイベントパラメーターを追加し、var myevent = evt?evt :( window.event?window.event:nullを使用します)
例:
<input type = "button" onclick = "dosomething(event)"/> <スクリプト言語= "javascript"> function 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。event.srcelementの問題
問題の説明: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.hrefの代わりにwindow.locationを使用します。もちろん、location.replace()メソッドの使用を検討することもできます。
12。モーダルおよび非モーダルのウィンドウの問題
問題の説明:IEでは、showmodaldialogおよびshowmodelessdialogを介してモーダルウィンドウと非モーダルウィンドウを開くことができます。 Firefoxの下では、できません。
解決策:window.open(pageurl、name、parameters)を使用して、新しいウィンドウを開きます。
子ウィンドウのパラメーターを親ウィンドウに戻す必要がある場合は、window.openerを使用して親ウィンドウにアクセスできます。親ウィンドウがチャイルドウィンドウを制御する必要がある場合は、var subwindow = window.open(pageurl、name、パラメーター)を使用します。新しく開かれたウィンドウオブジェクトを取得します。
13、フレーム、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 = new function( 'inject()')を使用します。またはdocument.body.onload = function(){/* code*/}は次のとおりです。
[注]関数と関数の違い
16.アクセスした親要素の違い
問題の説明:IEでは、obj.parentelementまたはobj.parentnodeを使用して、objの親ノードにアクセスします。 Firefoxの下で、obj.parentnodeを使用してOBJの親ノードにアクセスします。
解決策:FirefoxとIEの両方がDOMをサポートするため、OBJ.ParentNodeはOBJの親ノードにアクセスするために使用されます。
17。innertextの問題。
問題の説明:InerTextはIEで適切に機能しますが、InnerTextはFirefoxでは機能しません。
回避策:非IEブラウザでInnertextの代わりにTextContentを使用します。
例:
if(navigator.appname.indexof( "explorer")> -1){document.getElementById( 'element')。innertext = "my text"; } else {document.getElementById( '要素')。textContent = "; my text"; }[注] InnerHtmlは、IEやFirefoxなどのブラウザによってサポートされています。 Outerhtmlなどの他のものはIEによってのみサポートされているため、使用しないことが最善です。
18。テーブル操作の問題
問題の説明:IE、Firefox、およびその他のブラウザは、テーブルタグの操作が異なります。 IEでは、innerhtmlをテーブルとtrに割り当てることは許可されていません。 JSを使用する場合、AppendChildメソッドを使用しても機能しません。 document.appendChildは、行をテーブルに挿入するときにFirefoxをサポートしますが、IEはそれらをサポートしていません。
解決策:行をTodyに挿入し、それらをテーブルに直接挿入しないでください
解決:
//空白行をテーブルに追加します:var row = otable.insertrow(-1); var cell = document.createelement( "td"); cell.innerhtml = ""; cell.classname = "xxxx"; row.AppendChild(Cell);
[注] JSフレームワークセットを使用して、JQueryなどのテーブルを操作することをお勧めします。
•テーブルの行と列の数を取得します
IEでは、次のコードを使用して、行と列の数を取得できます。
var detailt = grid.getTable( "11"); //行の長さを取得var r = deculationt.rows.length; //列の長さを取得var l = detailt.cells.length;
FirefoxまたはGoogleで列の長さを取得することは無効です。
解決:
var detailt = grid.getTable( "11"); //行の長さを取得var r = deculationt.rows.length; //列の長さを取得var l = detailt.rows [0] .cells.length;
19。オブジェクトの幅と高さの割り当ての問題
問題の説明:obj.style.height = imgobj.height in firefoxに似たステートメントは無効です。
解決策:obj.style.height = imgobj.height + 'px'をユニフォームで使用します。
20。SetAttribute( 'Style'、 'Color:Red;')
Firefoxサポート(IEを除く、すべてのブラウザがサポートされるようになりました)、IEはそれをサポートしていません
解決策:setAttribute( 'style'、 'color:red')をsetAttributeしないでください
object.style.csstext = 'color:red;'を使用します(この執筆には例外があります)
最良の方法は、上記のすべての方法を使用することであり、それは絶対確実になります。
21。クラス名設定
setattribute( 'class'、 'styleclass')
Firefoxはサポートしますが、IEはサポートしていません(属性名がクラスであることを指定します。IEは要素のクラス属性を設定しません。
解決:
setAttribute( 'class'、 'styleclass')setAttribute( 'className'、 'styleclass')または直接object.className = 'styleclass';
IEとFFの両方がオブジェクトをサポートしています。ClassName。
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( 'input'); rdo.setattribute( 'type'、 'radio'); rdo.setattribute( 'name'、 'radiobtn'); rdo.setattribute( 'value'、 'checked');
つまり:
var rdo = document.createelement( "<input name =" radiobtn "type =" radio "value =" checked " />");
解決:
この違いは、前の違いとは異なります。今回は完全に異なっているので、それを解決する一般的な方法はありませんので、if-elseのみ
幸いなことに、IEは、他のブラウザが認識できないドキュメントの一意の属性を認識できます。問題が解決しました。
JavaScriptのマルチブラウザー互換性の23の問題に対する迅速な解決策は、私があなたと共有する完全なコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。