How can I execute a JavaScript function to use a different stylesheet?
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.
5 answers
solution1
1 2011-02-16 20:02:17
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.
solution2
1 2011-02-16 20:06:00
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.
solution3
1 2011-02-16 20:09:31
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);
solution4
1 2011-02-16 21:08:10
A List Apart has a pretty nice style switcher.
solution5
0 ACCPTED 2011-02-17 13:30:38
Here's what I ended up doing, in jQuery. I was overcomplicating it.
$(function() {
if (window.top!=window.self) {
// my css switcher
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.