LoginSignup
1
2

More than 3 years have passed since last update.

IE11でエラーが出るjavaScriptを条件分岐で読み込まなくする方法

Last updated at Posted at 2020-04-10

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様のご教示で解決しました!投稿してから数分で解決するなんてすごい!
本当にありがとうございました!!

1
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2