jquery - Fancybox 弹出窗口丢失了参数中的字符

Question

我们使用 CDN 来托管我们的一些图像，并根据宽度或高度动态调整这些图像的大小。我们从产品详细信息页面加载图像的较小版本，然后使用 fancybox 链接加载“大”版本。问题是对于包含连续 $ 符号的参数，第二个符号会丢失。

<a rel="toolTip" class="fullImage" href="//images.acmestatic.com/Some-SEO-Image-Description-123123123.jpg?o=F38xloqGLyfcBbpwwfspkclHSSYj&V=D$$c&">Click here to see the full image</a>

随后的 fancybox 弹出窗口会呈现带有 url 的损坏图像:

<img class="fancybox-image" src="//images.acmestatic.com/Some-SEO-Image-Description-123123123.jpg?o=F38xloqGLyfcBbpwwfspkclHSSYj&V=D$c&" alt="">

V 参数是根据描述文本自动生成的，并用作 CRC 检查以确保描述文本未被篡改，因此该参数值是在飞。

对问题可能出在哪里有什么建议吗？

Answer 1

Fancybox (v2.x) 使用 html 模板 ( tpl ) 并替换传入的 href将其插入到默认或自定义模板中，如果是的话:

content = current.tpl.image.replace(/\{href\}/g, href);

请记住， .replace() 方法“返回一个新字符串，其中部分或所有匹配的模式被替换”。

如您所见here , 模式 $$插入 "$" ，这就是为什么在连续 $ 时第二个符号丢失的原因迹象。

解决方法

正如 @jmh2013 的评论中指出的那样, 你可以使用 encodeURIComponent() 在加载 fancybox 内容之前对尾部参数(不是完整的 URL)进行编码。

然后，您可以使用 decodeURIComponent() 将尾随参数设置回模板 后的 URL replace()操作发生在 fancybox 脚本中。

类似的东西:

jQuery(document).ready(function ($) {
    $(".fullImage").fancybox({
        beforeLoad: function () {
            // encode trailing parameter
            var _param = this.href.split("?");
            this.href = _param[0] + "?" + encodeURIComponent(_param[1]);
        },
        beforeShow: function () {
            $(".fancybox-image").attr("src", decodeURIComponent(this.href));
        }
    });
}); // ready

参见 JSFIDDLE

注意:这是针对 fancybox v2.x 的