Question

我有一个奇怪的错误，其中load（）打破了我的旋转木马。

我有一张Slick Slider，有3张幻灯片。您可以单击“下一步”按钮移动到下一张幻灯片。您还可以单击幻灯片本身，然后使用以下内容将内容加载到cat的div和一些文本中：

$('.frame').load(url);

错误是在您查看加载的内容并单击BACK后，NEXT按钮不再起作用。不知怎的，它打破了导航。我已经尝试过show（）和hide（），但这并没有帮助。

请参阅我的codepen demo

如果您觉得有用，这就是url我加载到该演示中。

感谢您抽出宝贵时间帮助我：）

Answer 1

正如我在您的问题评论中所述，在您加载其他文档后，Slick Slider插件停止工作的原因是因为另一个文档将jQuery库重新包含在您的顶级浏览上下文中。

jQuery插件通过定义新方法然后将其附加到jQuery.prototype（别名为jQuery.fn）对象来使自己可访问。

当您通过脚本标记将jQuery库包含到文档中时，可以调用console.log(jQuery.fn);，您将看到一个包含构成jQuery库的所有便捷方法的对象。

在您类似地包含Slick Slider库之后，您可以再次调用console.log(jQuery.fn);，您会发现它有一个名为slick的方法属性。

问题在于，当您加载位于url的文档时，该文档正在将script标记插入到src为jQuery的父文档中。这会导致jQuery库的新加载，从而消除了您的初始实例。如果您此时致电console.log(jQuery.fn.slick);，您会发现它是undefined。

我以前从未见过加载到另一个文档div中的整个HTML文档（而不是HTML片段）。这会将元素插入到顶级文档的正文中，而不应该存在<head>和<body>。我真的很惊讶，这导致了少数问题。

文档通常嵌套在其他文档中的方式是使用iframe。 iframe中的文档将是自己的沙箱，其样式和脚本不会与父框架中的文件冲突。

您可以通过将$('.frame').load(url);替换为以下内容来实现项目中的iframe：

var $iframe = $('<iframe />', {
    src: url,
    style: 'height:100%; width:100%;'
});
$('.frame').html($iframe);