ブラウザの互換性問題に対する Web フロントエンド ソリューション

今回は、ブラウザの互換性の問題に対する Web フロントエンドの解決策について説明します。ブラウザの互換性の問題を解決するための Web フロントエンドの 注意事項は何ですか?実際のケースを見てみましょう。

いわゆるブラウザーの互換性の問題とは、異なるブラウザーが同じコード部分の異なる解析を行い、ページ表示効果に一貫性がなくなる状況を指します。ほとんどの場合、当社の要件は、ユーザーが当社の Web サイトの閲覧やシステムへのログインにどのブラウザを使用しても、統一された表示効果が得られることです。したがって、ブラウザーの互換性の問題は、フロントエンド開発者が頻繁に遭遇する問題であり、解決する必要があります:

1. css3

メディア クエリ 互換性ソリューション: Respond.js

GitHub アドレス: https://github.com/scottjehl/Respond

(インターネットより)
IE8 は CSS メディア クエリをサポートしていません。これはレスポンシブ デザインに大きな悪影響を及ぼします。 Respond.js は、IE6 ～ 8 が「最小/最大幅」メディア クエリ条件と互換性を持つのに役立ちます。

使用方法: ページ内のすべての CSS ファイルの参照場所の後に Respond.js を参照します。また、Respond.js がより早く参照されるほど、ユーザーがページがちらつくのを目にする可能性が低くなります。

2. カスタム属性の問題

問題の説明: IE では、通常の属性を取得するメソッドを使用できますが、Firefox では getAttribute() を使用することしかできません。 ) カスタム プロパティを取得します。

解決策: getAttribute() を通じてカスタム属性を取得します。

3. 変数名が HTML の ID と同じである問題

問題の説明: IE では、HTML オブジェクトの ID をドキュメントの下位オブジェクトの変数名として直接使用できますが、それは使用できません。 Firefox では HTML オブジェクトの ID を使用できます。IE では同じ変数名を使用できません。

解決策: document.idName の代わりに document.getElementById("idName") を使用します。エラーを減らすために、同じ HTML オブジェクト ID を持つ変数名を使用しないことをお勧めします。変数を宣言するときは、あいまいさを避けるために常に var キーワードを追加してください。

4. Const の問題

問題の説明: Firefox では、

const キーワード または var キーワードを使用して定数を定義できますが、IE では var キーワードのみを使用して定数を定義できます。 解決策: 定数を定義するには、一律に var キーワードを使用します。 ES6でlet以降の変数定義方法であるconstに関して注意すべき点は、変数を宣言する際に値を代入しないとエラーになることです。

5. Window.event の問題

問題の説明: window.event は IE でのみ実行でき、Firefox では実行できません。これは、Firefox のイベントがイベントが発生する場面でのみ使用できるためです。

解決策: イベントが発生する関数にイベント パラメーターを追加し、関数本体で var myEvent = evt?evt:(window.event?window.event:null) を使用します (仮パラメーターが evt であると仮定します)

例:

<input type="button" onclick="doSomething(event)"/> 
<script language="javascript"> 
function doSomething(evt) { 
    var myEvent = evt?evt:(window.event?window.event:null) 
    ...} 123456

6.event.x とevent.y の問題

7. ページ上のマウスの位置を取得します

IE では、イベント オブジェクトには x、y 属性がありますが、pageX、pageY 属性はありません

Firefox では、 、イベント オブジェクトには pageX、pageY 属性がありますが、x、y 属性はありません。

解決策:

IE では、event.x の代わりに mX (mX =event.x ?event.x :event.pageX;) を使用します。

7. フレームの問題について

次のフレームを例に挙げます:

1. フレーム オブジェクトにアクセスします

: このフレーム オブジェクトにアクセスするには、window.frameId または window.frameName を使用します。 Firefox: このフレーム オブジェクトにアクセスするには window.frameName を使用します。
解決策: このフレーム オブジェクトにアクセスするには一律に window.document.getElementById("frameId") を使用します。
2. フレーム コンテンツを切り替えます。 IE と Firefox の両方で .src = "webjx.com.html" または window.frameName.location = "webjx.com.html" を使用して、フレームのコンテンツを切り替えることができます。フレームを親ウィンドウに戻すには、フレーム キーワード
で
parent を使用して親ウィンドウにアクセスできます。

8. Body 読み込みの問題
問題の説明: Firefox の body オブジェクトは、ブラウザによって body タグが完全に読み取られる前に存在します。一方、IE の body オブジェクトは、body タグがブラウザによって完全に読み取られた後に存在する必要があります。 【注意】この問題は実際に検証されていないため、検証後に修正されます。

[注意] IE6、Opera9、FireFox2 では上記の問題が発生しないことが確認されています。単純な JS スクリプトは、要素がまだ読み込まれていない場合でも、スクリプトより前に読み込まれているすべてのオブジェクトと要素にアクセスできます。

9. イベント委任方法

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）：

window.onload = function(){
   　　var oUl = document.getElementById("ul1");
   　　oUl.onclick = function(ev){
    　　　　var ev = ev || window.event;
        　　　　var target = ev.target || ev.srcElement;
       　　　　if(target.nodeName.toLowerCase() == 'li'){
       　 　　　　　　 alert(123);
　　　　　　　  alert(target.innerHTML);
    　　　　}
   　　}
}1234567891011

十、访问的父元素的区别

问题说明：在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。
解决方法：因为firefox与IE都支持DOM，因此统一使用obj.parentNode 来访问obj的父结点。

十一、innerText的问题.

问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。
解决方法：在非IE浏览器中使用textContent代替innerText。

if(navigator.appName.indexOf("Explorer") >-1){ 
    document.getElementById('element').innerText = "my text"; 
} 
else{ 
    document.getElementById('element').textContent = ";my text"; 
}123456

十二、用setAttribute设置事件

var obj = document.getElementById('objId'); 
obj.setAttribute('onclick','funcitonname();');12

FIREFOX支持，IE不支持
解决办法：
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数

var obj = document.getElementById('objId'); 
obj.onclick=function(){fucntionname();};12

十三、设置类名

setAttribute(‘class’,’styleClass’)
FIREFOX支持，IE不支持(指定属性名为class，IE不会设置元素的class属性，相反只使用setAttribute时IE自动识CLASSNAME属性)
解决办法如下：

setAttribute('class','styleClass') 
setAttribute('className','styleClass') 
//或者直接
 object.className='styleClass';123456

十四、绑定事件

在IE下我们通常使用attachEvent方法

var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3); 12345

可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

var btn1Obj = document.getElementById("btn1"); 
//element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false); 
btn1Obj.addEventListener("click",method2,false); 
btn1Obj.addEventListener("click",method3,false); 12345

顺变说一下这两个的使用方式：

addEventListener的使用方式

target.addEventListener(type,listener,useCapture);

target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，不含“on”如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。
例如：

document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 1

2.对于attachEvent

target.attachEvent(type, listener);

target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。

例如：

document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);}); 1

但是他们都给出了事件的移除方法

removeEventListener(event,function,capture/bubble);

十五、ajax请求

对于ajax请求只要出现兼容性的方面就是创建对象时候的区别我们要考虑IE6的情况,下面给出代码

   //设置IE6的情况，注意，在判断XMLHttpRequest是否存在时将其
    //设置为window.XMLHttpRequest，这样将其设置为属性，在检测时就不是未定义
    //而是undefine
    //1.创建Ajax对象
    if(window.XMLHttpRequest){        var oAjax=new XMLHttpRequest();
    }    else{        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

前端页面测试的方法

javascript中call与apply的应用

以上がブラウザの互換性問題に対する Web フロントエンド ソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。