IE・FF対応のjsスクリプトコードまとめ（よく使う）_javascriptスキル

/*以下では Internet Explorer の代わりに IE、Mozzila Firefox の代わりに MF/FF を使用します */

//window.event IE: window.event オブジェクトがあります FF: window.event オブジェクトがありません。イベント オブジェクトは関数に引数として渡すことができます。 onmousemove=doMouseMove(event) など 解決策: var events =event || 例:

コードをコピーします コードは次のとおりです: function test(event) { varevent = window.event ||何かをする } //現在のマウス座標 IE:event.x およびevent.y。 FF:event.pageX およびevent.pageY。 共通: どちらにも、event.clientX プロパティとevent.clientY プロパティがあります。

//マウスの現在の座標 (プラス、スクロール バーが回転した距離) IE:event.offsetX およびevent.offsetY。 FF:event.layerX およびevent.layerY。 解決策:

コードをコピー コードは次のとおりです。 function test(event) { varevent =event | //または varevent =event : window.event;//これら 2 つのいずれかを使用できます。 if else (この省略形) var x =event.offsetY || //do Something } を使用できます。

/**他の互換性のあるソリューションも同様であるため、1 つずつ例を示しません**/

//event.srcElement の問題 説明: IE では、イベント オブジェクトには srcElement 属性がありますが、Firefox では偶数オブジェクトである target 属性がありません。 target 属性 はありますが、 srcElement 属性はありません。 解決策: obj(obj =event.srcElement ?event.srcElement :event.target;) を使用して、IE または Firefox のevent.target の下にあります。event の互換性の問題にも注意してください。

//event.toElement の問題 問題: IE では、even オブジェクトには srcElement 属性がありますが、target 属性がありません。 Firefox では、even オブジェクトは target 属性を持ちます。ただし、srcElement 属性はありません 解決策: var target = e.popularTarget || e.toElement;

//ラベルの x および y 座標位置: style.posLeft および style.posTop IE: 持っています。 FF: いいえ。 共通: object.offsetLeft と object.offsetTop。

//フォームの高さと幅 IE: document.body.offsetWidth と document.body.offsetHeight。注: 現時点では、ページには body タグが必要です。 FF: window.innerWidth と window.innerHegih、 と document.documentElement.clientWidth と document.documentElement.clientHeight。 共通: document.body.clientWidth および document.body.clientHeight。

//イベントを追加します IE: element.attachEvent("onclick", function);。 FF: element.addEventListener("クリック", 関数, true)。 一般: element.onclick=function。 onclick イベントも使用できますが、onclick と上記の 2 つのメソッドの効果は異なります。 onclick は 1 つのプロセスのみを実行しますが、attachEvent と addEventListener はプロセスのリスト、つまり複数のプロセスを実行します。 例: element.attachEvent("onclick", func1); element.attachEvent("onclick", func2) とすると、func1 と func2 の両方が実行されます。

//タグ IE のカスタム属性: タグ div1 に属性値が定義されている場合、その値は div1.value および div1["value"] によって取得できます。 FF: div1.value および div1["value"] を使用して取得することはできません。 一般: div1.getAttribute("value")。

//document.form.item 問題 IE: 既存の問題: 既存のコードには document.formName.item("itemName") のようなステートメントが多数あり、MFFF/IE: document.formName.elements["elementName"]

//コレクション/配列オブジェクトの問題 (1) 既存の問題: 既存のコード内の多くのコレクション オブジェクト Use ()取得するとき、IE はそれを受け入れることができますが、MF は受け入れられません。 (2) 解決策: 添字演算として代わりに [] を使用します。例: document.forms("formName") は document.forms["formName"] に変更されます。 別の例: document.getElementsByName("inputName")(1) が document.getElementsByName("inputName")[1] に変更されました

//HTML オブジェクトの ID をオブジェクト名 (1) 既存の問題点 IEでは、HTMLオブジェクトのIDをそのままドキュメントの下位オブジェクトの変数名として使用できます。 MFにはありません。 (2) 解決策 オブジェクト変数として idName の代わりに getElementById("idName") を使用する

//idName 文字列を使用してオブジェクトを取得する問題 (1) 既存問題 IE では、eval(idName) を使用して ID idName を持つ HTML オブジェクトを取得できますが、MF ではできません。 (2) 解決策 eval(idName)の代わりにgetElementById(idName)を使用します。

//変数名が HTML オブジェクト ID と同じである問題 (1) 既存の問題 MF では、オブジェクト ID が HTML オブジェクトの名前として使用されていないため、 、HTML オブジェクトで使用できます。同じ ID の変数名は IE では使用できません。 (2) 解決策 変数を宣言するときは、IE でも正常に動作するように、曖昧さを避けるために必ず var を付けます。 さらに、エラーを減らすために、HTML オブジェクト ID と同じ変数名を使用しないことをお勧めします。

// document.getElementsByName() と document.all[name] の問題 既存の問題: IE では、getElementsByName() も document.all[name] も div 要素の取得に使用できません //document.all Firefox は document.all と互換性がありますが、警告が生成されます。 の代わりに getElementById("*") または getElementByTagName("*") を使用できます。ただし、document.all.length などの属性については、

//input と完全に互換性がありません。 .type 属性の問題 説明: IE の input.type 属性は読み取り専用ですが、Firefox の input.type 属性は読み取り/書き込み可能です

//window.location.href の問題 説明: IE または Firefox2.0 では、window.location または window.location.href を使用できますが、Firefox 1.5.x では、 は window.location のみを使用できます。 window.location.href

//モーダル ウィンドウと非モーダル ウィンドウの問題 説明: IE では、showModalDialog および showModelessDialog を通じてモーダル ウィンドウと非モーダル ウィンドウを開くことができますが、Firefox ではこれは不可能です。 🎜>解決策: window を直接使用します。 open(pageURL,name,parameters) メソッドにより、新しいウィンドウが開きます。 子ウィンドウのパラメータを親ウィンドウに渡す必要がある場合は、子ウィンドウで window.opener を使用して親ウィンドウにアクセスできます。 例: var parWin = window.opener; document.getElementById("Aqing ").value = "Aqing";

//フレームの問題 次のフレームを例に挙げます: (1) フレーム オブジェクトにアクセスします: IE: このフレーム オブジェクトにアクセスするには、window.frameId または window.frameName を使用します。と FrameName は同じ名前にすることができます。 FF: このフレーム オブジェクトは、window.frameName を使用してのみアクセスできます。 さらに、IE および Firefox では、このフレーム オブジェクトにアクセスするために window.document.getElementById("frameId") を使用できます。 2) フレームのコンテンツを切り替えます: IE と Firefox の両方で window.document.getElementById("testFrame").src = "xxx.html" または window.frameName.location = "xxx.html" を使用できます。フレームのコンテンツを切り替えるには、 フレーム内のパラメータを親ウィンドウ (オープナーではなく親フレームであることに注意してください) に渡す必要がある場合は、 frme のparentを使用して、親ウィンドウ。 例: window.parent.document.form1.filename.value="Aqing";

//body の問題 ブラウザが body タグを完全に読み取る前に Firefox の本体が存在します。 IE の本体は、ブラウザによって body タグが完全に読み取られた後に存在する必要があります

//イベント委任メソッド IE: document.body.onload = inject; //これは実装されています。 before FF: document.body.onload = inject();

//Firefox と IE の親要素 (parentElement) の違い IE: obj.parentElement FF: obj. parentNode 解決策: FF と IE はどちらも DOM をサポートしているため、 obj.parentNode を使用するのが良い選択です

//innerText は IE では正常に動作しますが、 textContent //は FireFox で HTML タグのスタイルを設定するために使用されます。すべての位置およびフォント サイズの値の後には px が続く必要があります。この IE もサポートされています

//親ノード、子ノード、および削除ノード IE:parentElement、parement.children、element.romoveNode(true)。 FF:parentNode、parentNode.childNodes、node.parentNode.removeChild(node)。

//select のオプション セットに対する操作 [] に加えて、SelectName.options.item() も列挙要素に使用できます。 SelectName.options の追加/削除は両方のブラウザで機能します。 追加後の要素の割り当てには注意してください。そうしないと失敗します。 選択内のすべてのオプションを動的に削除します。 document.getElementById("ddlResourceType").options.length=0; 動的に削除します。選択内のすべてのオプション 特定の項目オプション: document.getElementById("ddlResourceType").options.remove(indx); 選択に項目オプションを動的に追加します: document.getElementById("ddlResourceType) ").options.add (new Option(text,value)); IE FF 動的削除の一般的なメソッド: document.getElementById("ddlResourceType").options[indx] = null;

//イベントをキャプチャします 問題: FF には setCapture()、releaseCapture() メソッドがありません 解決策: IE:

コードをコピーします コードは次のとおりです: obj.setCapture(); obj.releaseCapture(); FF:

コードをコピーします

コードは次のとおりです: window.captureEvents(Event.MOUSEMOVE |Event.MOUSEUP); window.releaseEvents( Event.MOUSEMOVE|Event.MOUSEUP); if (!window.captureEvents) { o.setCapture(); window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP) ; } if (!window.captureEvents) { o.releaseCapture() }else { (Event.MOUSEMOVE|Event.MOUSEUP); }

//Web コンテンツの選択を禁止します 問題: FF は CSS、IE で禁止する必要がありますJS で禁止する必要があります 解決策: IE: obj.onselectstart = function() {return false;} FF: -moz-user-select:none; >//描画 IE: VML。 FF: SVG。

//CSS: 透明 IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF:不透明度:0.6。

//CSS: 角丸 IE: 角丸はサポートされていません。 FF: -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; ;-moz-border-radius-bottomright:4px;。

//CSS: 二重線バンプボーダー IE: border:2px outset;。 FF：-moz-border-top-colors: #d4d0c8white;-moz-border-left-colors:#d4d0c8white; -moz-border-right-colors:#404040 #808080;-moz -border-bottom-colors:#404040 #808080;。