Question

我使用以下代码加载包含名为Flexisel的幻灯片脚本代码的外部HTML文件：

    // ==UserScript==

// @run-at      document-start

// ==/UserScript==

$.ajax({
           type: "GET",
           url: "/JS/jquery.flexisel.js.html",
           success: function(){},
           dataType: "script",
           cache: false
        });

$(window).load(function() {
    $("#flexisel").flexisel({
        visibleItems: 5,
        animationSpeed: 1000,
        autoPlay: true,
        autoPlaySpeed: 2000,            
        pauseOnHover: true,
        enableResponsiveBreakpoints: true,
        responsiveBreakpoints: { 
            portrait: { 
                changePoint:480,
                visibleItems: 1
            }, 
            landscape: { 
                changePoint:640,
                visibleItems: 2
            },
            tablet: { 
                changePoint:768,
                visibleItems: 3
            }
        }
    });
 });

当用户首次访问网站或访问之前未访问过的网页时，此代码效果很好。不幸的是，有些情况下幻灯片无法加载，例如当用户单击浏览器中的后退按钮时。是否有更可靠的解决方案来确保始终正确加载此代码？

我有以下限制：

我必须使用这种方法，因为我使用的是自定义电子商务解决方案，其功能非常有限。我可以使用Tiny MCE上传文件（但仅限于有限的文件类型）。这就是我使用包含JS代码而不是JS文件的HTML文件的原因。

我无法直接控制用于页面的布局或模板。

我可以创建自定义CSS和JavaScript脚本，但我无法控制何时加载它们（即我无法将它们放在页面上）。

默认情况下安装了JQuery，因此我可以访问某些功能（我不完全确定哪个版本）。

任何有关加载此代码的可靠方法的建议都会受到欢迎......

Answer 1

我认为问题是你的ajax响应可能在你运行脚本之前没有加载，因此flexisel插件在那个执行点（？）不存在。

我认为正确的方法是挂钩文档就绪事件，或使用速记版本，并在ajax响应函数体中加载flexisel：

$(function() {
  $.ajax({
     type: "GET",
     url: "/JS/jquery.flexisel.js.html",
     success: function(){
        $("#flexisel").flexisel({
            visibleItems: 5,
            animationSpeed: 1000,
            autoPlay: true,
            autoPlaySpeed: 2000,            
            pauseOnHover: true,
            enableResponsiveBreakpoints: true,
            responsiveBreakpoints: { 
                portrait: { 
                    changePoint:480,
                    visibleItems: 1
                }, 
                landscape: { 
                    changePoint:640,
                    visibleItems: 2
                },
                tablet: { 
                    changePoint:768,
                    visibleItems: 3
                }
            }
        });
     },
     dataType: "script",
     cache: false
  });
});

如果这不起作用，您仍然可以尝试窗口加载：）

Answer 2

在运行脚本之前强制页面每次刷新

window.location = window.location

脚本无法每次都加载

2 个答案: