解决WordPress 5.7.2某些插件报错“Uncaught TypeError: Cannot read property 'msie' of undefined”

升级到 WordPress 5.7.2 之后某些插件报错

Uncaught TypeError: Cannot read property 'msie' of undefined

导致无法运行,原因为

$.browser方法从 jQuery 1.9 开始被移除

而新版本的 WordPress 5.7.2 使用的是 jQuery 3.5 因此上述异常就不足为奇了。

解决方法为在 WordPress 5.7.2 相关主题下,新增如下兼容脚本:

(function(jQuery){

    if(jQuery.browser) return;

    jQuery.browser = {};
    jQuery.browser.mozilla = false;
    jQuery.browser.webkit = false;
    jQuery.browser.opera = false;
    jQuery.browser.msie = false;

    let nAgt = navigator.userAgent;
    jQuery.browser.name = navigator.appName;
    jQuery.browser.fullVersion = ''+parseFloat(navigator.appVersion);
    jQuery.browser.majorVersion = parseInt(navigator.appVersion,10);
    let nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version" 
    if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
        jQuery.browser.opera = true;
        jQuery.browser.name = "Opera";
        jQuery.browser.fullVersion = nAgt.substring(verOffset+6);
        if ((verOffset=nAgt.indexOf("Version"))!=-1)
            jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
    }
// In MSIE, the true version is after "MSIE" in userAgent 
    else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
        jQuery.browser.msie = true;
        jQuery.browser.name = "Microsoft Internet Explorer";
        jQuery.browser.fullVersion = nAgt.substring(verOffset+5);
    }
// In Chrome, the true version is after "Chrome" 
    else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
        jQuery.browser.webkit = true;
        jQuery.browser.name = "Chrome";
        jQuery.browser.fullVersion = nAgt.substring(verOffset+7);
    }
// In Safari, the true version is after "Safari" or after "Version" 
    else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
        jQuery.browser.webkit = true;
        jQuery.browser.name = "Safari";
        jQuery.browser.fullVersion = nAgt.substring(verOffset+7);
        if ((verOffset=nAgt.indexOf("Version"))!=-1)
            jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
    }
// In Firefox, the true version is after "Firefox" 
    else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
        jQuery.browser.mozilla = true;
        jQuery.browser.name = "Firefox";
        jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
    }
// In most other browsers, "name/version" is at the end of userAgent 
    else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
        (verOffset=nAgt.lastIndexOf('/')) )
    {
        jQuery.browser.name = nAgt.substring(nameOffset,verOffset);
        jQuery.browser.fullVersion = nAgt.substring(verOffset+1);
        if (jQuery.browser.name.toLowerCase()==jQuery.browser.name.toUpperCase()) {
            jQuery.browser.name = navigator.appName;
        }
    }
// trim the fullVersion string at semicolon/space if present 
    if ((ix=jQuery.browser.fullVersion.indexOf(";"))!=-1)
        jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix);
    if ((ix=jQuery.browser.fullVersion.indexOf(" "))!=-1)
        jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix);

    jQuery.browser.majorVersion = parseInt(''+jQuery.browser.fullVersion,10);
    if (isNaN(jQuery.browser.majorVersion)) {
        jQuery.browser.fullVersion = ''+parseFloat(navigator.appVersion);
        jQuery.browser.majorVersion = parseInt(navigator.appVersion,10);
    }
    jQuery.browser.version = jQuery.browser.majorVersion;
})(jQuery); 

接着需要在主题的 footer.php 中增加引用,如下:

<!-- 引入兼容性js文件-->
<?php
  echo '<script src='.get_theme_file_uri('jquery-browser-compt.js').' type="text/javascript"></script>'
?>

完整的 footer.php ,参考内容如下:

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the "site-content" div and all content after.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>

</div><!-- .site-content -->
  <footer id="colophon" class="site-footer" role="contentinfo">
    <div class="site-info">
      <?php
        /*
	 * Fires before the Twenty Fifteen footer text for footer customization.
         *
         * @since Twenty Fifteen 1.0
         */
        do_action( 'twentyfifteen_credits' );
      ?>
    </div><!-- .site-info -->
  </footer><!-- .site-footer -->
</div><!-- .site -->

<?php wp_footer(); ?>

<!-- 引入兼容性js文件-->
<?php
  echo '<script src='.get_theme_file_uri('jquery-browser-compt.js').' type="text/javascript"></script>'
?>

</body>
</html>

参考链接


发布者

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注