Question

使用fancybox（v2），如何创建一个唯一的网址，在加载后，会显示包含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>

的fancybox

<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

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

相反，在fancybox的afterLoad函数中使用window.history.replacestate。

例如：

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

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

Answer 2

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

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

需要子串调用来从#

返回的哈希字符串中删除window.location.hash

希望这有帮助

jquery fancybox，iframe或ajax，用url加载

2 个答案: