时间戳

首页 > 解决方案 > Fancybox 3.5 Ajax 不工作。Ajax 内容无法加载错误

jquery - Fancybox 3.5 Ajax 不工作。Ajax 内容无法加载错误

问题描述

Fancybox 3.5 上的 Ajax 功能不起作用。它显示“无法加载请求的内容”错误。演示本身也不起作用：

  <a data-fancybox data-type="ajax" data-src="https://codepen.io/fancyapps/pen/oBgoqB.html" href="javascript:;" class="btn btn-primary">Open demo</a>

从这支笔#1

和

  <a data-fancybox data-type="ajax" data-src="https://codepen.io/fancyapps/pen/wgavbY.html" data-filter="#two" href="javascript:;">#1 Using "data-filter" attribute</a>

从这支笔#2

Chrome 开发者工具错误：

VM17:1 GET https://codepen.io/fancyapps/pen/wgavbY.html?fancybox=true 503（匿名）@ VM17:1 发送@jquery.min.js:2 ajax @jquery.min.js:2 loadSlide @jquery.fancybox.min.js:11 jumpTo @jquery.fancybox.min.js:11 init @jquery.fancybox.min.js:11 b @jquery.fancybox.min.js:11 打开@jquery.fancybox.min .js:12 i @ jquery.fancybox.min.js:11 dispatch @ jquery.min.js:2 y.handle @ jquery.min.js:2 jvgRRe:1 在' https://codepen.io访问 XMLHttpRequest /fancyapps/pen/wgavbY.html?fancybox=true ' from origin ' https://s.codepen.io ' 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头.

标签： jqueryfancybox

解决方案

好吧，它确实对我和其他人都非常有效。由于您没有提供指向您的页面/项目的链接或没有分享任何有用的详细信息，因此无法为您提供帮助。

ajax 不工作时的典型场景：

1）您正在测试本地文件，直接在浏览器中打开它。由于浏览器安全政策，您的文件必须通过网络服务器提供；

2）您的链接不正确；

3）您的 ajax 请求被阻止same-origin policy，请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

无论如何，请检查控制台输出（按 F12 打开开发人员工具），应该有提示您的问题的原因。

推荐阅读