Colorbox iframe - loading specific div only

问题:

I'm using wordpress and the jquery colorbox plugin, and I'm loading an internal page from my website into an iframe. I'd like to either only load a specific div ID or, alternatively, hide specific div IDs or classes. I've read Colorbox Load Specific div from iFrame but unfortunately I'm not able to get this code to work, the entire page continues to display in the iframe. My links are identified with the class .colorbox-link and I'm trying to only display the div of #main inside the iframe. Here's my current code that I've placed in header.php:

<script type="text/javascript">
    $(window).load(function () {
        var $iframe = $(".colorbox-link"); 
        $(".colorbox-link").colorbox({      
             href: $(".colorbox-link").attr('href') + " #main", 
        }); 
    }); 
</script>

Sorry if this is a jquery newbie question - thanks in advance for any help!

回答1:

Well colorbox wouldn't be displaying anything in an iframe in this situation. Iframe's aren't something that colorbox assumes, you would had to have to explicitly set colorbox's iframe property to true to display something in an iframe. It's not something you want to do in this situation anyway.

The code you posted should work (outside of that stray comma), so maybe you should post a link demonstrating the problem you having. Also double check that '#main' matches an element in the document you are loading.

<script type="text/javascript">
    $(window).load(function () {
        $(".colorbox-link").colorbox({      
             href: function(){ return $(this).attr('href') + " #main";}
        }); 
    }); 
</script>