Question

I’m working on a project where the client wants to have existing pages dynamically loaded into a single page. That’s no problem, but the styling is not working as it should when the pages are loaded as standalone files on the existing site. Is there a way to extract the CSS link from each page and have it dynamically applied to the viewer page?

Here’s a copy of the function I wrote out to call the external pages into the viewer page:

$(function () {
    $('a.dock-item2').click(function () { // click on an anchor with the dock-item2 class
        $("#page").remove();             // remove what's in the viewer already
        var href = $(this).attr('href'); // grab the external file path and name
        $('<div id="page" />').load(href, function () { // create a new div and load 
            // the page content
            $(this).hide()               // just stuff to make a nice transition...
                .appendTo('#viewer')
                .fadeIn(1000);
        });
        return false;
    })
});

I’d like to apply it strictly to the div in question… but maybe that isn’t the best thing to do. Should I consider loading this stuff into an iframe instead? Maybe it’s just Friday and I can’t think rationally anymore.

Answer 1

Getting non-body tags (tags that do not exist within the body) from remote pages is difficult/impossible with jQuery’s ajax features. That being said, if this is the case you can setup a PHP script locally to act as the middle man. It can read the contents of the page, find the css file, and then return that or even return the contents of the css file itself – you then could dynamically place it on your page. This shouldn’t be too difficult, especially if you use something like phpQuery to grab the <script> tag, or even PHPSimpleHTMLDOMParser, which is similar to phpQuery.

All hypothetical, but it just might work 😉 Of course if you just wanted to load iframes, you could. This would keep all links operable within the iframe.