Question

我目前正在使用fancybox 3.4.1遇到一个令人烦恼（可疑）的缓存问题：

<a data-fancybox="" data-type="ajax" data-src="src/views/forms/SpeiseplanCreateForm.php?ValidFrom=1560117600" href="javascript:;" id="fancybox-SpeiseplanCreateForm"><button id="fancybox-SpeiseplanCreateForm-button">Speiseplan bearbeiten</button></a>

有一个GET参数，然后由我的PHP脚本评估，但是，当我第一次单击它时，它可以正常工作，但是当我通过JavaScript更改ValidFrom的值并尝试打开时再次单击该框时，get参数仍然与第一次调用中相同。我认为这与fancybox缓存请求有关。

我已验证URL参数已正确更改，并且我还尝试通过将其添加到标头来禁用缓存：

     <script>
        $(document).ready(function() {
         $(".data-fancybox").fancybox({
         type       : 'ajax',
         ajax       : { cache: false }
          });
        });
    </script>

如此处建议：https://stackoverflow.com/a/17621281/4934937

是否可以禁用缓存？

Answer 1

我刚刚发现了一个非常肮脏的解决方法。在Firefox（编辑HTML）中编辑了元素之后，它就起作用了。因此，我猜想它与某些怪异的缓存（浏览器或fancybox，谁知道）必须有一些共同点。

解决方法是创建一个新的a元素，删除旧的a并将其再次附加到旧的a的父元素上。

let newElement = document.createElement("a");
newElement.setAttribute("id","fancybox-"+id)
newElement.setAttribute("data-fancybox","");
newElement.setAttribute("data-type","ajax");
newElement.setAttribute("href","javascript:;");
newElement.setAttribute("data-src",fancyboxSrc);
newElement.appendChild(button);

fancybox.outerHTML = "";
parent.appendChild(newElement);

Fancybox避免缓存Ajax请求

1 个答案: