javascript_javascript スキルに基づいた 4 つのブラウザー間で重要な機能

以下の 4 つの機能がその一部です。

まず、ブラウザ検出スクリプトを追加する必要があります:

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

/***************************************
* ブラウザを検出
***** * *******************************/
var user = navigator.userAgent;
var browser = {}; IndexOf("Opera ") > -1 && typeof window.opera == "object";
browser.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") ) > - 1 || user.indexOf("Konqueror") > -1) && !browser.opera;browser.ie = user.indexOf("MSIE") > >browser.gecko = user.indexOf("Gecko") > -1 && !browser.khtml;
if (browser.ie ) {
var ie_reg = /MSIE (d .d );/; 🎜>ie_reg.test(user);
var v = parseFloat("$1"]);
browser.ie55 = v }




1) イベントバインドbind()を追加します

これは誰もが知っているはずです。 IE のイベント バインディング関数はattachEvent ですが、Firefox と Safari は addEventListener です。カプセル化は以下で行われます。


コードをコピー

コードは次のとおりです: /************************************* * イベント バインディングを追加

* @param obj:イベントがバインドされる要素

* @param type: イベント名。 「on」を追加しないでください。例: 「onclick」の代わりに「click」。 ******* *****************/
function binding( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e' type fn] = fn;
obj[type fn] = function(){obj; ['e ' type fn]( window.event );}
obj.attachEvent( 'on' type, obj[type fn] );
} else
obj.addEventListener( type, fn, false );
}
たとえば、ページ クリック イベントを追加します。

bind(document, "click", function() {
alert("Hello, World!!");
}) ;


2) イベントバインディングの削除 unbind()
と binding() は同じ関数パラメータを持ちますが、関数は逆です。

コードをコピー

コードは次のとおりです: /*************************************** * イベントバインディングを削除* @param obj : イベントを削除する要素* @param type: イベント名。 「on」は追加しないでください。例: 「onclick」の代わりに「click」

* @param fn: イベント処理関数

****************** ** ****************/
function unbind( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on' type, obj[type fn] ); null;
} else
obj.removeEventListener( type, fn, false );
}



3) 要素
計算されたスタイルは、要素の最終的なスタイルである最終スタイルとも呼ばれます。 IE は要素の currentStyle プロパティを使用しますが、他のブラウザは標準の document.defaultView.getComputedStyle() メソッドを使用します。

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

/*************************************** * 要素 の計算されたスタイルを返します。 * @param 要素 : Element* @param キー : スタイル名 (Camel) **************************** ******** ****/ function getStyle(element, key) {

// パラメータが正しくありません

if ( typeof element != "object" || typeof key != "string" || key == "" )
return false;

// 不透明度
if( key == "opacity" ) {
if(browser.ie) {
var f = element.filters; && f.length > 0 && f.alpha) {
return (f.alpha.opacity / 100)
return
}
return document.defaultView.getComputedStyle ( element, null)["opacity"];
}

// float
if ( key == "float" ) {
key = (browser.ie ? "styleFloat" : "cssFloat");
}
if ( typeof element.currentStyle != "unknown" ){
return element.currentStyle[key]
} else {
return document.defaultView . getComputedStyle(element, null)[key];
}
}


IE の透明度のメカニズムは、他のブラウザーとは異なります。ここでは、透明度を表すために不透明度が使用されます。また、float は JavaScript の予約語であるため、IE では styleFloat が使用され、その他のブラウザでは cssFloat が使用されます。ここではfloatとして統一しています。

例: 透明度を取得




コードをコピー

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

var a = document.getElementById("test");
var opacity = getStyle(a, "opacity");

4) DOM ロード イベントbinding domready()
domready は window.onload とは異なり、画像、ビデオ、その他を含むページのすべての要素がロードされていることを意味します。通常、それほど長く待つ必要はありません。DOM が使用可能になるだけで済みます。

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

/***************************************
* domready
* @param fn: to実行される関数
*****************************************/
function domready(fn) {
//パラメータが正しくありません
if(typeof fn != "function")
return false;
if(typeof document.addEventListener == "function") { // IE 以外のブラウザ
document.addEventListener("DOMContentLoaded", fn, false);
return;
var _this = argument.callee
if(_this.ready); // DOM がロードされている場合は、直接実行します。
return fn();

if(!_this.list) // 実行する関数の配列を作成します
_this.list = [ ];

_this.list.push(fn);

if (_this.done) return; // ループ検出が進行中の場合は、
(function() { / / ループ検出
_this .done = true;
try {
document.documentElement.doScroll("left");
} catch(error) {
setTimeout(arguments.callee, 0) );
return;
}
// DOM がロードされ、実行されるすべての関数が実行されます
_this.ready = true; .length; i_this.list[i]()
}
});


例:

コードをコピーします コードは次のとおりです。 domready(function(){

alert("DOM がロードされました!");