IE11だけコードエラーが出る
jQueryのmouseenter/mouseleaveが、IE11だけエラーが出て動作せず困ってしまいました。。。
(Edgeは大丈夫だったのに)
他のブラウザでは問題ないので、
とにかくIE11はこのjavaScriptを起動させないようにしようと思い、
色々試してみました。
条件分岐でIE11のエラー回避を試す
javaScriptを使った判定
こちらを参考にさせていただきましたm(_ _)m
https://developers.wano.co.jp/311/
var userAgent = window.navigator.userAgent.toLowerCase();
if( userAgent.match(/(msie|MSIE)/) || userAgent.match(/(T|t)rident/) ) {
//IEの時、mouseenter/mouseleaveが効かないため、静止svgを挿入
jQuery('.icon-facebook').html('<img src="images/common/facebook.svg" alt=""/>');
} else {
//他のブラウザで svg animationを起動させる
//(↓下は記述例として入れているだけで、これだけでは動かないです。)
var directionFacebook = 1;
iconFacebook.addEventListener('mouseenter', (e) => {
animationFacebook.setDirection(directionFacebook);
animationFacebook.play();
});
iconFacebook.addEventListener('mouseleave', (e) => {
animationFacebook.stop();
});
}
これは効果があったが、else内も読み込むので、
その中にIE非対応のコードがエラーで出てしまいました。。
IE11回避策としては失敗。。
PHPとHTMLを使った判定
こちらを参考にさせていただきましたm(_ _)m
https://16deza.com/put-ie-in-separate-html/
(ここでは、IE8,9の判定方法も書いてくださっています)
WordPressで使う場合は、
functions.phpに以下のように記載。
(普通のPHPサイトのhead内でも使えるそうです。)
// IE11判定
function is_ie11() {
if(preg_match('/(?i)trident/',$_SERVER['HTTP_USER_AGENT'])) {
$is_ie11 = true;
} else {
$is_ie11 = false;
}
return $is_ie11;
}
footer.phpのjs読み込み部分
<?php if(is_ie11()): ?>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/anime--ie.js" type="text/javascript"></script>
<?php else: ?>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/anime--other.js" type="text/javascript"></script>
<?php endif; ?>
これでうまく条件分岐して、エラーを回避することが出来ました!
追記
初投稿もあって、コードのMarkdownがうまくいかないようです。。
```
でコードを囲ったら、黒っぽい背景にならないので困っています。。。
どなたかご教示していただけると有難いですm(_ _)m
htsign様のご教示で解決しました!投稿してから数分で解決するなんてすごい!
本当にありがとうございました!!