How can I execute a JavaScript function to use a 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
}
}
加载中,请稍侯......
精彩评论