开发者

How can I execute a JavaScript function to use a different stylesheet?

开发者 https://www.devze.com 2023-02-12 01:11 出处:网络
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开发者_如何学Go, and how do I serve up the different stylesheet?

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开发者_如何学Go, 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.


Look into window.parent. If it's not null, then you're inside a frame. I don't think there is an "event" that fires.


If window.parent is not == null, then you are in a frame. You can also access information about the containing page this way.

You can wire up to the body onload event.


I've used jQuery to do on-the-fly style sheet switching. I'm sure there's a pure JS equal. Assuming your <head>....</head> contains

<link type='text/css' rel='stylesheet' href='styles.php?theme=default' />

then you can reload your CSS files (or the same CSS file with passed values) this way

 $('link').attr('href','styles.php?theme=' + newTheme); 


A List Apart has a pretty nice style switcher.

http://www.alistapart.com/articles/alternate/


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

$(function() {

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

精彩评论

暂无评论...
验证码 换一张
取 消