jquery fancybox、iframe 或 ajax，使用 url 加载

Question

使用 fancybox (v2)，我如何创建一个独特的 url，在加载时，显示带有 iframe 内容的 fancybox。我可以很好地处理内联内容（例如 www.mysite.com/index.html#idgoeshere），但不知道 url 或 js 应该包含什么才能加载fancybox，并在其中包含一个特定的 iframe或 ajax.txt 页面。

我想要达到的目标是访问如下链接：

www.mysite.com/index.html#iframe.html

加载索引页面，打开fancybox窗口，将iframe.html页面加载到fancybox窗口中（或者也可以是通过ajax加载的.txt文件）。

HTML

<a class="fancybox fancybox.iframe" href="iframe.html">Iframe</a>

花式盒

<script>
$(document).ready(function($) { 
    $.fancybox({
    content: $(window.location.hash).html()
});
    $('.fancybox').fancybox();
});
</script>

感谢您的帮助或指导。

凯尔

更新

感谢大家的帮助！！这就是最终对我有用的东西。我将我们的内容保存到单独的 html 文件中，然后使用 fancybox.iframe 调用它们

JS：

<script>
$(document).ready(function () {
    $('.fancybox').fancybox({
     'scrolling'   : 'no'   
    });
    if (window.location.hash !== "") {
        $(window.location.hash).click();
    }
});
</script>

Answer 1

使用主题标签是个坏主意，因为 Google 和 Facebook 等网站经常忽略它们。

改为在fancybox的afterLoad函数中使用window.history.replacestate。

例如：

afterLoad:function(){
    window.history.replaceState({},"Fancybox","/url-to-set");
}

关于 replaceState 的奇怪之处在于前两个参数无关紧要（据我所知）。唯一重要的是最后一个参数“/url-to-set”。您想将此设置为您希望用作 url 的唯一 url。

Answer 2

查看the Fancybox site 上的示例 Fancybox 操作完全基于链接的 href。因此，如果您加载页面，然后在调用.fancybox 之前更新页面上链接的href 以指向iframe.html，那么它应该可以按预期工作。警告：未经测试的代码在我脑海中浮现……

$(document).ready(function(){ 
    $('#target').attr('href', window.location.hash.substring(1)).fancybox();
});

需要子字符串调用从window.location.hash返回的哈希字符串中删除#

希望对你有帮助