IE n'inclus pas le CSS en AJAX

**Bisûnûrs** · 04/12/2009, 16h38

C'est ce qu'on lit un peu partout, sur tous les forums.

Une des solutions préconisées est de recréer les styles en JS.
En fait, il y a une méthode beaucoup plus simple que de se faire chier à recréer tous les styles en JS (surtout quand on en a beaucoup, et certains même chargés dynamiquement).

Prenons deux fichiers, donc un chargé par le premier en AJAX :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS</title>
  <script src="prototype.js"></script>
</head>
<body>
 
<div id="content"></div>
 
<script>
new Ajax.Updater(
  'content',
  'content.php',
  {}
);
</script>
 
</body>
</html>

Et content.php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<style>
.ok {
  background : green
}
</style>
 
<div class="ok">
  Blablablablablablabla
</div>

Si ce code fonctionne très bien sur Firefox, ce n'est pas le cas sur IE qui ignore les styles.

Une des solutions serait de mettre les styles en ligne à la place des classes, mais ce n'est pas le but de la manoeuvre.

C'est beaucoup plus simple.

Il suffit .... de mettre la balise style à la fin :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="ok">
  Blablablablablablabla
</div>
 
<style>
.ok {
  background : green
}
</style>

Et hop ça fonctionne comme par miracle. Pas besoin de technique JS à la con.

C'est le même principe pour un simple innerHTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script src="prototype.js"></script>
 
<div id="content">Texte</div>
 
<script>
$( 'content' ).innerHTML = '<style>.ok {background : green } </style><div class="ok">Blablablablabla</div>';
</script>

Ne fonctionne pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script src="prototype.js"></script>
 
<div id="content">Texte</div>
 
<script>
$( 'content' ).innerHTML = '<div class="ok">Blablablablabla</div><style>.ok {background : green } </style>';
</script>

Fonctionne.

Voilà pour une méthode qui fonctionne donc sur tous les navigateurs, même IE, et sans changer l'ensemble du code pour du JS.

**SpaceFrog** · 04/12/2009, 19h40

suffirait d'utiliser la librairie que j'ai mise dans les contributions pour créer dynamiquement les balises sur le retour ajax...
Je pense que la balise style ainsi créée serait alors prise en compte ...

IE n'inclus pas le CSS en AJAX

Contribuez

Vue hybride

Discussions similaires

Partager

Partager