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() 方法会返回一个新字符串，其中 pattern 的部分或全部匹配替换为替换“。

您可以检查here，模式 $$会插入"$"，这就是连续{{1}时第二个符号丢失的原因标志。

解决方法

正如@jmh2013的评论中所指出的，您可以使用encodeURIComponent()对加载fancybox内容之前的的尾随参数（不是完整网址）进行编码。

然后，您可以使用decodeURIComponent()将结尾参数重新设置回网址> 模板$操作发生在fancybox脚本中。

类似的东西：

replace()

参见 JSFIDDLE

注意：这适用于fancybox v2.x

Fancybox弹出窗口从参数中丢失字符

1 个答案: