创建Fancybox时出现Uncaught TypeError错误，部分功能未正常生效

我在页面中添加了创建Fancybox的JavaScript代码，Fancybox虽已创建但未实现全部所需功能，且报错：

Uncaught TypeError: Cannot read properties of undefined (reading 'defaults')

我的代码如下： #

HTML代码：

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.0.0.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" rel="stylesheet" />

<script src="/modules/newmodule/views/js/new.js" type="text/javascript"></script>
<a href="{$link->getPageLink('contact')}?content_only=1" id="contact-us-popup">Contact us</a>

JavaScript代码（new.js）：

(function(jQuery) {
jQuery(document).ready(function()  {
        jQuery('#contact-us-popup').fancybox({
            type: 'ajax',
            autoDimensions: false,
            autoSize: false,
            width: 600,
            height: "auto"
        });
})
})(jQuery.noConflict());

问题原因 #

这个报错主要是jQuery版本不兼容导致的：

1. 你使用的jquery-latest.js是动态最新版本，可能是jQuery 3.x+，而jquery-migrate-1.0.0.js是适配jQuery 1.x的旧版本，无法兼容高版本jQuery，导致Fancybox无法正确读取依赖的jQuery对象属性。
2. 同时你使用的Fancybox配置参数是旧版（比如autoDimensions），Fancybox 3.x已经废弃了这些参数，也会导致功能异常。

解决步骤及修正代码 #

1. 替换兼容的jQuery版本

移除过时的jquery-migrate-1.0.0.js，改用适配jQuery 3.x的迁移库，同时固定jQuery版本为稳定兼容版（不要用latest避免版本波动）。

2. 修正Fancybox配置参数

使用Fancybox 3.x支持的参数替换旧版参数。

修改后的HTML代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 如需兼容旧代码，引入适配jQuery 3.x的迁移库 -->
<script src="https://code.jquery.com/jquery-migrate-3.4.1.min.js"></script>

<!-- 改用压缩版的Fancybox资源，加载更高效 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet" />

<script src="/modules/newmodule/views/js/new.js" type="text/javascript"></script>
<a href="{$link->getPageLink('contact')}?content_only=1" id="contact-us-popup">Contact us</a>

修改后的JavaScript代码：

(function($) {
    $(document).ready(function() {
        $('#contact-us-popup').fancybox({
            type: 'ajax',
            width: 600,
            height: 'auto',
            // 替代旧版autoDimensions/autoSize的参数
            autoSize: false,
            fitToView: false
        });
    });
})(jQuery.noConflict());

内容的提问来源于stack exchange，提问作者user20971923