我想在运行https的应用程序中使用fancybox

Question

我有一个使用fancybox的Web应用程序，当Web服务器配置为通过http协议运行时它工作正常，但是当应用程序通过https protocal运行时，fancybox没有加载任何东西。任何有关此事的帮助都会有所帮助

Answer 1

这是在HTTPS环境中使用fancybox时必须考虑的事项：

<强> 1）。图片

在混合的HTTP / HTTPS环境中允许使用图像，因此您可以从安全（HTTPS）页面调用托管在不安全（HTTP）站点中的映像（通过绝对路径），如：

<a class="fancybox" href="http://unsecured.com/images/image01.jpg">open image</a>

注意：此方案会在控制台中触发警告。

如果您使用的是相对路径，那么HTTPS会添加到图片的网址中，您无需执行任何其他操作。

<强> 2）。有效内容

在混合的HTTP / HTTPS环境中不允许使用活动内容（iframe / ajax），因此无法从安全的HTTPS服务器调用任何HTTP页面。

另外请注意，AJAX调用受同源策略约束，尽管任何ajaxed页面都可以托管在同一个域中，但可以从HTTPS页面调用它，如

<a class="fancybox fancybox.ajax" href="http://myserver.com/ajaxpage.html">open ajax page, unsecured connection</a>

......不会工作。

<a class="fancybox fancybox.ajax" href="https://myserver.com/ajaxpage.html">open ajax page, secured connection</a>

......会的。

第3）。打开其他域名的iframe

无法打开来自其他域的iframe，除非相关网页还提供了安全HTTPS连接的可能性。如果外部服务器/页面不支持HTTPS，则仅向URL添加HTTPS是不够的。

请注意，许多需要HTTPS连接的网站也可能会发送X-Frame-Options : SAMEORIGIN标题，因此您可能无法从安全或不安全的页面打开它们。

解决方法

根据this StackOverflow answer，我们可以使用 Google作为SSL代理来解决从安全页面打开不安全页面的问题，因此我们可以添加此回调到我们的fancybox初始化代码：

beforeLoad : function () {
    if (this.type == "iframe") {
        this.href = "https://www.google.com/search?q=%" + this.href + "&btnI=Im+Feeling+Lucky";
    }
}

查看 DEMO
*您可能会收到警告，因为它是安全的服务器