ユーザーのブラウザがjQueryを使用しているInternet Explorerであるかどうかを検出する良い方法はありますか?jQueryブラウザの検出?
私はIEを使用しているPNGグラフィックに問題があり、ユーザーがIEでサイトを表示している場合にのみ、GIFのためにスワップします。
ユーザーのブラウザがjQueryを使用しているInternet Explorerであるかどうかを検出する良い方法はありますか?jQueryブラウザの検出?
私はIEを使用しているPNGグラフィックに問題があり、ユーザーがIEでサイトを表示している場合にのみ、GIFのためにスワップします。
あなたはい、$.browser
を使用することができますが、それはブラウザ検出を使用することが悪い考えです:
if($.browser.msie) { /* IE */ }
インスタンスのためのより良いオプションが$.support
ているだろう機能検出:このように:
if(!$.support.opacity) { /* IE 6-8 */ }
$.support.opacity
0はIE 7-8が透明PNG画像ファイルを扱うのに(スタイリングにopacity
をサポートしていないというのブラウザで偽であるので、これはまだ私は個人的に...あなたは後にしているものに応じて、理想的ではありませんIE 7/8ユーザーに最適なエクスペリエンスを与えると思います)。
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE6ImageStyles.css">
<![endif]-->
助言ニックのための乾杯、それはちょうどターゲットie6に良いことに同意します。 – Dancer
にはjquery> 1.9のためのjquery migrateプラグインが必要です。このアプローチは推奨されていません – Beta033
はい、これは一度に受け入れられる回答としては適切でしたが、もはや(それはJickeryのせいで、Nickのものではありません)。 – MrBoJangles
$.browser
の機能を確認してください。
IEを検出するには、IE conditional commentsに行ってください。
例:
<!--[if IE]>
Special instructions for IE here
<![endif]-->
"このプロパティを使用することをお勧めします(代わりにjQuery.supportを参照してください)jQuery.browserはjQueryの今後のリリースでプラグインに移動される可能性があります。 – neoswf
<script>
jQuery.each(jQuery.browser, function(i, val) {
$("<div>" + i + " : <span>" + val + "</span>")
.appendTo(document.body);
});</script>
$ .browser.msie
のため:あなたは本当にんは、このような(アルファフィルタなし)ではないサポート透明PNG画像を、ないターゲットIE6であるべきこと
IE
Simerさん、ありがとう、私はちょうどie6をターゲットにして行くだろうと思う。 – Dancer
はい、可能ですが、jQuery.support
:http://api.jquery.com/jQuery.support/を使用することをお勧めします。
この場合、jQuery.support.opacity
を使用してください。
編集:これはもちろん、不透明度に関するものと仮定します。
私はこれが答えではないことを認識していますが、実際にコメントに投稿することはできません!
もしあなたがjavascriptを使うつもりなら、このコードはie6でpngの問題を修正します。私はそれをあまり使用していないが、afaikあなたはx.gifと呼ばれる透明なgifイメージを必要とし、それは自動的に残りを行います。今、特徴検出は$経由で好まれた提案だとしてjQueryを使って
// JavaScript Document
var supersleight = function() {
var root = false;
var applyPositioning = true;
// Path to a transparent GIF image
var shim = 'x.gif';
// RegExp to match above GIF image name
var shim_pattern = /x\.gif$/i;
var fnLoadPngs = function() {
if (root) {
root = document.getElementById(root);
}else{
root = document;
}
for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
// background pngs
if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null) {
bg_fnFixPng(obj);
}
// image elements
if (obj.tagName=='IMG' && obj.src.match(/\.png$/i) !== null){
el_fnFixPng(obj);
}
// apply position to 'active' elements
if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
obj.style.position = 'relative';
}
}
};
var bg_fnFixPng = function(obj) {
var mode = 'scale';
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
mode = 'crop';
}
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
obj.style.backgroundImage = 'url('+shim+')';
};
var el_fnFixPng = function(img) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
img.src = shim;
};
var addLoadEvent = function(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
};
return {
init: function() {
addLoadEvent(fnLoadPngs);
},
limitTo: function(el) {
root = el;
},
run: function() {
fnLoadPngs();
}
};
}();
// limit to part of the page ... pass an ID to limitTo:
// supersleight.limitTo('header');
supersleight.init();
$.browser.webkit
$.browser.safari
$.browser.opera
$.browser.msie
$.browser.mozilla
if ($.browser.msie) {
//do something
}
else if ($.browser.mozilla) {
//do something else
}
作品は1.3
の$ .browserは1.9で削除されました。より良いブラウザ検出jQueryのためのサポート
は強く、このような(V1.9以降に削除)jQuery.supportで代わりのプロパティへの依存のModernizrまたは廃止予定jQuery.browserなどの外部ライブラリを使用することをお勧めします
いただきました!あなたはPNGファイルを持っている問題?ブラウザの種類に応じて、グラフィックスをスワップするためにPHPなどのサーバ側を使用するほうが良いでしょう。 a)より信頼性が高く、b)javascriptを持たない人でも機能します。 –
@Thomas Clayson、実際にこのサーバー側を行う信頼できる方法はありません。 –
ie6の厄介な青い背景があります。ストライプされた背景ボックスがあり、GIFが正しく表示されないため、上にpngを使用したい場合 – Dancer