eval("idName") の問題 問題の説明: IE では、eval("idName") または getElementById("idName") を使用して ID を持つ HTML を取得できます。 idName オブジェクト。Firefox では、idName の ID を持つ HTML オブジェクトを取得するには getElementById("idName") のみを使用できます。 解決策: getElementById("idName") を一律に使用して、idName の ID を持つ HTML オブジェクトを取得します。
変数名が HTML オブジェクトの ID と同じである問題 問題の説明: IE では、HTML オブジェクトの ID を直接従属として使用できます。ドキュメントのオブジェクト変数名ですが、Firefox では使用できません。Firefox では、HTML オブジェクト ID と同じ変数名を使用できますが、IE では使用できません。 解決策: document.idName の代わりに document.getElementById("idName") を使用します。エラーを減らすために、同じ HTML オブジェクト ID を持つ変数名を使用しないことをお勧めします。変数を宣言するときは、あいまいさを避けるために常に var キーワードを追加してください。
const の問題 問題の説明: Firefox では const キーワードまたは var キーワードを使用して定数を定義できますが、IE では var キーワードのみを使用して定数を定義できます。 。 解決策: var キーワードを一律に使用して定数を定義します。
window.event の問題 問題の説明: window.event は IE でのみ実行できますが、Firefox では実行できません。これは、Firefox のイベントがイベントの発生時にのみ実行できるためです。現場で使用します。 解決策: イベントが発生する関数にイベント パラメーターを追加し、関数本体で var myEvent = evt?evt:(window.event?window.event:null) 例を使用します (仮パラメーターを想定)は evt) ： <script><BR>function doSomething(evt) {<BR>var myEvent = evt ? evt: (window.event ? window.event : null)<BR>…<BR> }<br><br><STRONG>event.x およびevent.y の問題<BR>問題の説明: IE では偶数オブジェクトに x 属性と y 属性がありますが、Firefox では pageX および pageY 属性がありません。偶数オブジェクトには pageX、pageY 属性がありますが、x、y 属性はありません。 <BR>解決策: var myX =event.x ?event.x :event.pageX;var myY =event.y ?event.y:event.pageY;<BR>質問 8 を検討する場合は、代わりに myEvent を使用してください。 。 <br><br><STRONG>event.srcElement の問題<BR>問題の説明: IE では、even オブジェクトには srcElement 属性がありますが、target 属性がありません。Firefox では、even オブジェクトには target 属性がありますが、 srcElement 属性がありません。 <BR>解決策: srcObj =event.srcElement ?event.srcElement :event.target;<BR>質問 8 を考慮する場合は、event の代わりに myEvent を使用してください。 <br><br><STRONG>window.location.href の問題<BR>問題の説明: IE または Firefox2.0.x では、window.location または window.location.href を使用できます。 x この条件では、window.location のみが使用できます。 <BR>解決策: window.location.href の代わりに window.location を使用します。もちろん、 location.replace() メソッドの使用を検討することもできます。 <br><br><STRONG>モーダル ウィンドウと非モーダル ウィンドウの問題<BR>問題の説明: IE では、モーダル ウィンドウと非モーダル ウィンドウは、Firefox では showModalDialog および showModelessDialog を通じて開くことができます。 。 <BR>解決策: window.open(pageURL,name,parameters) を直接使用して、新しいウィンドウを開きます。 <BR>子ウィンドウのパラメータを親ウィンドウに渡す必要がある場合は、子ウィンドウで window.opener を使用して親ウィンドウにアクセスできます。親ウィンドウで子ウィンドウを制御する必要がある場合は、var subWindow = window.open(pageURL,name,parameters); を使用して、新しく開かれたウィンドウ オブジェクトを取得します。 <br><br><STRONG>フレームと iframe の問題<BR>次のフレームを例に挙げます: <BR><frame src=”xxx.html” id=”frameId” name=”frameName” /><BR>(1) フレーム オブジェクトにアクセスします<BR>IE: ウィンドウを使用します.frameId または window.frameName を使用して、このフレーム オブジェクトにアクセスします。<BR>Firefox: window.frameName を使用して、このフレーム オブジェクトにアクセスします。<BR>解決策: このフレーム オブジェクトにアクセスするには、一律に window.document.getElementById("frameId") を使用します。 <br><br>(2) フレームコンテンツの切り替え<BR>IE と Firefox の両方で、window.document.getElementById("frameId").src = "xxx.html" または window.frameName.location = " を使用できます。 xxx.html" を使用してフレームのコンテンツを切り替えます。<BR> フレーム内のパラメータを親ウィンドウに戻す必要がある場合は、フレーム内のparentキーワードを使用して親ウィンドウにアクセスできます。 <br><br><STRONG>body 読み込みの問題<BR>問題の説明: Firefox の body オブジェクトはブラウザによって body タグが完全に読み取られる前に存在しますが、IE の body オブジェクトは body タグ内に存在する必要があります。ブラウザが完全に読み込むまで。 <BR>[注意]この問題はまだ検証されていないため、検証後に修正されます。 <BR>[注意] IE6、Opera9、FireFox2 では上記の問題が発生しないことが確認されており、単純な JS スクリプトは、要素が読み込まれていない場合でも、スクリプトより先に読み込まれたすべてのオブジェクトと要素にアクセスできます。まだ。 <br><br><STRONG>イベント委任メソッド<BR>問題の説明: IE では、関数 inject() が以前に実装されていた document.body.onload = inject; を使用します。 .onload = inject();<BR>解決策: document.body.onload=new Function("inject()"); または document.body.onload = function(){/* コードは次のとおりです */}<BR>[注意] Function と function の違い<br><br><STRONG>アクセスする親要素の違い<BR>問題の説明: IE では、obj.parentElement または obj.parentNode を使用して親にアクセスしますobj のノード; Firefox では、obj.parentNode を使用して obj の親ノードにアクセスします。 <BR>解決策: Firefox と IE は両方とも DOM をサポートしているため、obj.parentNode は obj の親ノードにアクセスするために一律に使用されます。<br><br><STRONG>cursor:hand VS cursor:pointer<BR>Problem description: Firefox does not support hand, but IE supports pointer, both are hand instructions. <BR>Solution: Use pointer uniformly. <br><br><STRONG>Problems with innerText<BR>Problem description: innerText can work normally in IE, but innerText does not work in FireFox. <BR>Workaround: Use textContent instead of innerText in non-IE browsers. <BR>Example: <BR>if(navigator.appName.indexOf("Explorer") >-1){<BR>document.getElementById("element").innerText = "my text";<BR>}else{ <BR>document.getElementById("element").textContent = "my text";<BR>}<BR>[Note] innerHTML is supported by browsers such as IE and Firefox. Others, such as outerHTML, are only supported by IE. , it is best not to use it. <br><br><STRONG>Object width and height assignment problem<BR>Problem description: Statements similar to obj.style.height = imgObj.height in FireFox are invalid. <BR>Solution: Use obj.style.height = imgObj.height "px" uniformly; The operations of the table tag are different. In IE, the innerHTML assignment of table and tr is not allowed. When using js to add a tr, the appendChild method does not work. <br>Solution: <br>//Append an empty row to the table: <STRONG>var row = otable.insertRow(-1);var cell = document.createElement("td");<BR> cell.innerHTML = “”;<BR>cell.className = “XXXX”;<BR>row.appendChild(cell);<BR>[Note] Since I rarely use JS to directly operate tables, I have never encountered this problem. It is recommended to use JS framework to operate tables, such as JQuery. <BR><BR><BR>Indentation problem of ul and ol lists<BR><BR>When eliminating the indentation of ul, ol and other lists, the style should be written as: list-style:none;margin:0px;padding:0px ;<br>The margin attribute is valid for IE, and the padding attribute is valid for FireFox. ← This sentence is incorrectly stated. For details, please see ↓<br>[Note] This issue has not been actually verified and will be modified after verification. <STRONG>[Note] It has been verified that in IE, setting margin:0px can remove the upper, lower, left and right indents, blanks, and list numbers or dots of the list. Setting padding has no effect on the style; in Firefox, setting margin:0px only You can remove the top and bottom spaces. After setting padding:0px, you can only remove the left and right indents. You must also set list-style:none to remove list numbers or dots. In other words, in IE, only margin:0px can be set to achieve the final effect, while in Firefox, margin:0px, padding:0px and list-style:none must be set at the same time to achieve the final effect. <BR><BR>CSS transparency issue<BR><BR>IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). <br>FF:opacity:0.6. <br>[Note] It is best to write both and put the opacity attribute below. <STRONG><BR>CSS rounded corners problem<BR><BR>IE: versions below ie7 do not support rounded corners. <br>FF: -moz-border-radius:4px, or -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -border-radius-bottomright:4px;. <br>[Note] The rounded corner problem is a classic problem in CSS. It is recommended to use the JQuery frameset to set rounded corners and leave these complex issues to others.</script>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
