0

使用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>
4

2 回答 2

1

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

而是在 fancybox 的 afterLoad 函数中使用 window.history.replacestate。

例如：

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

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

于 2013-03-07T18:09:29.543 回答
0

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

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

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

希望这可以帮助

于 2013-03-07T22:30:09.253 回答