Fancybox 的屏蔽 url 方法在 Chrome 和 Safari 中不起作用答案

【问题标题】：Masked url method with Fancybox not working in Chrome and SafariFancybox 的屏蔽 url 方法在 Chrome 和 Safari 中不起作用
【发布时间】：2014-08-21 21:40:24
【问题描述】：

已更新：我似乎已通过在 get-image 页面的标题中添加“缓存控制：私有”来解决 Chrome 中的问题（请参阅下面的更新代码和 cmets 以显示我所做的）。我没有足够的经验来理解为什么这会解决任何问题，但删除单个标题行会将问题带回 Chrome （并且没有该行的 Chrome 中的缓存控制响应标题是“无存储，无缓存，必须 -重新验证，post-check=0，pre-check=0')。

它仍然无法在 Safari 中运行。如果缓存控制更改让某人知道为什么它在 Safari 中不起作用，那么我会很高兴听到它！

第一次上堆栈溢出。如果做得不对，请见谅。

我正在使用 Wordpress 和使用 Fancybox 1.3.6 的 Easy Fancybox 插件 (http://wordpress.org/plugins/easy-fancybox/)。（我对插件作者有疑问，但我不确定它与插件有关。）

我一直在尝试想出一种方法来屏蔽图像网址，我以为我已经破解了，但现在我发现它在 Chrome 和 Safari 上不起作用。

你可以在http://www.jatest.dreamhosters.com/test-page/看到一个例子

在此页面上，我有两个相同图像的示例。一个以标准方式启动 fancybox，而另一个使用新的隐藏 url 方法。

Chrome 控制台中的错误是“资源解释为图像，但使用 MIME 类型 text/html 传输”。 更新：通过添加“Content-Type: image”（根据下面新版本的 get-image）修复了此警告，但这并没有解决 Chrome 或 Safari 中的问题。

这就是我如何使用隐藏 url 方法。（为了简单起见，这是一种缩减版，但这正是我在测试页示例中的实现方式。）

在“测试页”上，我有以下代码（页面上方有一个session_start()）：

<?php

$img_src = 'http://www.jatest.dreamhosters.com/wp-content/uploads/Choir-practice.jpg';

//deletes all session variables related to fancybox hidden urls
//only used to keep the number of session variables down
foreach ($_SESSION as $key => $session_variable) {
    $locator = strpos( $key, 'rfhash' );
    if ( $locator > 0 ) { //if this session variable was created for fancybox hidden url (because it contains _rfhash)
        unset($_SESSION[$key]);
    }
}

//create new session variable
$imageHash = '_rfhash'.md5(uniqid());
$_SESSION[$imageHash] = $img_src;

$hidden_img_src = add_query_arg('h', $imageHash, 'http://'.$_SERVER['HTTP_HOST'].'/get-image/');

?>

Unhidden url<br />
<a class = "fancybox" href = "<?php echo $img_src; ?>">
    <img src="<?php echo $img_src; ?>" width = "700" height = "525">
</a>
<br />
Hidden url<br />
<a class = "fancybox {type: 'image'}" href = "<?php echo $hidden_img_src; ?>">
    <img src="<?php echo $hidden_img_src; ?>" width = "700" height = "525">
</a>

然后在“屏蔽”网址指向的获取图像页面（更新版本）上，我有：

session_start();
header('Content-Type: image/jpeg'); //adding this got rid of a warning but didn't fix the problem
header('cache-control: Private'); //adding this fixed the problem in Chrome

if (isset($_GET['h'])) {
    $hash = $_GET['h'];

    if (isset($_SESSION[$hash]) && $_SESSION[$hash]) {

        readfile($_SESSION[$hash]); //changing from echo file_get_contents to readfile made no difference but from what I've come across seems to be recommended instead
        unset($_SESSION[$hash]);
    }
}

我现在已经超出了我的深度，不知所措。任何建议都会非常受欢迎......

谢谢！

【问题讨论】：

我不认为这个class="fancybox {type: 'image'}" 是一个有效的类。为什么不将选项type: 'image' 添加到自定义的fancybox 初始化脚本中呢？
顺便说一句，下次您提供指向测试页面的链接时，请确保删除 ANNOYING 上下文菜单。
@JFK 重新上课 - 这就是 type: 'image' 在使用 wordpress 的 fancybox 插件时必须添加的方式。我知道这可以正常工作，因为使用它修复了另一个错误。对上下文菜单感到抱歉-您的意思是禁用右键单击吗？现在重新启用...
已更新以反映 Chrome 中问题的修复方法 - 我只是不明白为什么它是修复方法，而且它也没有修复 Safari 中的问题
在这种情况下，问题不在于fancybox，而是您的图像返回方式。如果你可以在浏览器中see it，你可以在fancybox中看到它

标签： php jquery wordpress fancybox

【解决方案1】：

所以最后犯了一个愚蠢的错误，感谢 JFK 让我走上正轨。

问题在于 get-images 中的 unset($_SESSION[$hash]);。我认为这就是正在发生的事情......

测试页面将加载，get-images 将运行一次以在测试页面上显示图像（它会成功），然后取消设置会话变量。然后当点击链接触发fancybox get-image 将再次运行但这次会话变量将不存在，因此图像将无法加载。然而，在 Firefox、IE（和 Chrome，一旦我将缓存控制设置为私有），浏览器将从缓存中加载图像。在 Safari 中，它不会。

删除unset($_SESSION[$hash]); 解决了这个问题。我将需要使用另一种方法来减少会话变量的数量。

【讨论】：