jquery fancybox, iframe or ajax, load with url

问题:

With fancybox (v2), how can I create a unique url that, upon load, displays the fancybox with iframe content. I have it working great with inline content (ex. www.mysite.com/index.html#idgoeshere), but don't know what the url or js should contain in order to load the fancybox, and within it, a specific iframe or ajax.txt page.

What I am trying to achieve, is by going to a link like:

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

Load the index page, with the fancybox window opened, and the iframe.html page loaded into the fancybox window (alternatively it can be a .txt file loaded via ajax too).

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>

Thanks for any help or guidance.

Kyle

Update

Thanks for everyones help!! Here is what ended up working great for me. I saved our my content into separate html files and then called them with fancybox.iframe

JS:

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

回答1:

Have a look at the examples on the Fancybox site The Fancybox action is based entirely on the href of the link. So, if you load up the page and then update the href of a link on the page to point to iframe.html before calling .fancybox on it, then it should work as expected. Warning: Untested code off the top of my head to follow…

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

The substring call is needed to remove the # from the hash string returned from window.location.hash

Hope this helps

回答2:

Using the hashtag is a bad idea because sites like Google and Facebook often ignore them.

Instead, use window.history.replacestate in the afterLoad function of fancybox.

For example:

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

Weird thing about replaceState is that the first two arguments don't matter (as far as I know). The only thing that matters is the final argument "/url-to-set". You want to set this as the unique url that you would like to have as your url.