Question

I want to serve up a different stylesheet if my app is loaded within an iframe. What JavaScript event do I use to do this check, and how do I serve up the different stylesheet?

EDIT:

I tried wiring this to the body onLoad event:

<script type="text/javascript">
    function checkFrame() {
        if (window.top!=window.self)
        {
            // In a Frame or IFrame
            document.write("<link rel='stylesheet' type='text/css' href='/custom/embedded'>");
        }
        else
        {
            // Not in a frame
            document.write("<link rel='stylesheet' type='text/css' href='/custom/standard'>");
        }
    }
</script>

but it displays a blank page only the stylesheet link in it.

Answer 1

Here’s what I ended up doing, in jQuery. I was overcomplicating it.

$(function() {

    if (window.top!=window.self) {
        // my css switcher
    }
}