ホームページ > ウェブフロントエンド > jsチュートリアル > 一般的な JavaScript の互換性の問題と関連する解決策 (chrome/IE/firefox)_javascript スキル

一般的な JavaScript の互換性の問題と関連する解決策 (chrome/IE/firefox)_javascript スキル

WBOY
リリース: 2016-05-16 17:05:57
オリジナル
975 人が閲覧しました

まず最初に、私がテストしたブラウザのバージョンは chrome15.0.874.121 Firefox 8.01 IE9 IETester

であることをここで宣言させていただきます。

次のコードはステートメントに関するものです

1: スクロールバーを取得する様子

コードをコピー コードは以下の通り:

function getScroll(){
var t, l, w, h;

if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop ;//スクロールバーの上部
l = document.documentElement.scrollLeft;//スクロールバーの左端
w = document.documentElement.scrollWidth;//幅スクロール バーの幅、つまりページの幅
h = document.documentElement.scrollHeight;//スクロール バーの高さ l = document.body.scrollLeft;
w = document.body.scrollWidth ;
h = document.body.scrollheight;
}
return {
t:t、
l:l、
w:w、
>


コードをコピー


コードは次のとおりです。

function getPageWidth(){
var pageWidth = window.innerWidth; if (typeof pageWindth != "number") {
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
} else { pageWidth = document.body.clientwidth; >コードをコピー

コードは次のとおりです:

function(){
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/ / msie ([d.] )/)) Sys.ie = s[1] : (s = ua.match(/firefox/([d.] )/)) ? Sys.firefox = s[1] : ( s = ua.match(/chrome/([d.] )/)) Sys.chrome = s[1] : (s = ua.match(/opera.([d.] )/)) ? . opera = s[1] : (s = ua.match(/version/([d.] ).*safari/)) Sys.safari = s[1] : 0;

if ( Sys .ie != null) {
return ("Firefox:" .firefox);//Firefox ブラウザとバージョン番号を決定します
}
if (Sys.chrome != null) {
return ("chrome:" Sys.chrome) ; // Chrome ブラウザとバージョン番号を判断します
}
if (sys.opera! = Null) {
Return ("Opera:" sys.opra );
}
if (Sys.safari != null) {
return ("safari:" Sys.safari);// safari ブラウザとバージョン番号を決定します
}
}



4: イベント監視


コードをコピー コードは次のとおりです:function(element, type, handler){
If (element.addEventListener) {
element.addEventListener(type, handler, false);
}
else
if (element.attachEvent) {
}
}



5: イベント削除




コードをコピー
コードは次のとおりです: if(element.detachevent)element ["on" type] = null;
}
}
}


6: イベント取得時、Firefox のイベントが連続して送出される場合、最初のイベントで問題が発生します。





コードをコピー

コードは次のとおりです:

function(event){

event = (event ?event : window.event);
if (event == null) {
var $E = function() {
var c = $E.caller;
while (c.caller)
c = c.caller;
return c.arguments[0]
};
__defineGetter__( "イベント", $E);
イベントを返す; >

コードをコピー

コードは次のとおりです:
function(event) ){

8: 実行しますイベントの伝播を続行しません





コードをコピー

コードは次のとおりです:

関数(イベント){
if (event .stopPropagation) {

コードをコピーします


コードは次のとおりです:


function(event){
returnevent.target ||
}


10: document.doctype は矛盾した
をサポートします E: 文書タイプの説明が存在する場合、それはコメントとして誤って解釈され、comment ノードとして扱われます。 document.doctype の値は常に null です。 Firefox: ドキュメント タイプの説明が存在する場合、それはドキュメントの最初の子ノードとして使用されます。 document.doctype は DocumentType ノードです。firstChild または childNodes[0] を介してアクセスすることもできます。 Safari、Chrome、Opera: ドキュメント タイプの説明が存在する場合、それは説明として使用されますが、ドキュメントの子ノードとしては使用されず、childNodes には表示されません。
11: 要素の検索

時々、IE が常に何を行っているのか、常に新しくて違うものになろうとしているのか、本当に理解できないことがあります。システムが独自のブラウザを許可しない場合、IE のシェアはさらに小さくなるでしょう。

ID と名前が同じ場合、彼も返されます

コードをコピー

コードは次のとおりです。

< head>


IE では結果が変わります。

IE も同様で、ID は大文字と小文字が区別されません

コードをコピーします コードは次のとおりです:










申し訳ありませんが、彼の結果は再び変更されました。

12: カスタム属性の場合、IE 以外のブラウザーでは item.myattributs は正しい結果を取得できません。

コードをコピー コードは次のとおりです:

function(item,myatt) {
return item.attributes[myatt].value;
}

同様に、属性を設定する方法、つまり値を割り当てる方法を知っておく必要があります。
コードをコピー コードは次のとおりです。

function(item,myatt,value){
item.attributes[myatt].value=value;
}

13: 要素の子ノードの数
コードをコピーします コードは次のとおりです:



  • 二番目

  • 三番目



IEの結果は次のとおりです3、他のブラウザは7です。

ノード間の空白文字は他のブラウザのテキストノードであり、結果は7です。このようになったら、

コードをコピー コードは次のとおりです。

< ul id="myul ">

これ全員の結果はすでに 3 です。
14: 作成ノードの問題
コードをコピー コードは次のとおりです:

//要素を動的に追加します。すべてのブラウザで実装できます
var newnode=document.createElement("input");
newnode.type="button";
newnode.value=" 6 番目 ";
//これは IE でも実現できます
var newnode= document.createElement("");

15: 右クリックをシールドする場合、Firefox は oncontextmenu イベントにおいて他のものとは異なります。

16: スタイルとスクリプトを動的に追加する場合、IE は他のブラウザとは異なります。具体的に確認してください。

17: DOM2 と DOM3 の場合、状況はさらに複雑です。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート