Webmaster Hub > Javascript et IE

Version complète: sur le forum Webmaster Hub : Javascript et IE

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > AjaX et JavaScript

adn

dimanche 31 août 2008 à 23:47

Bonjour,

Pour différer l'affichage d'une bannière de pub en tête de page qui est parfois très lente, je crée un DIV vide avec un ID et ensuite je provoque l'exécution de ma pub dans une DIV bidon en fin de page que j'appelle DUMMY pour récupérer le code HTML et le recopier dans la première DIV. Pour finir je détruis la DIV DUMMY.

Cela marche parfaitement sur FIREFOX mais çà coince avec IE et je ne vois pas bien ou.... Une idée du problème de compatibilité ou d'une autre solution est la bienvenue.

Le code HTML

CODE

Le script 1: son rôle est d'éxécuter la fonction de l'adserver qui génére le code HTML dans la DIV dummy

CODE

document.write('<div id="dummy" style="visibility:hidden;">');
adserver();
document.write('</div>');

Le script 2: son rôle est copier le code de la DIV dummy dans la DIV emplacement-pub

CODE

if (document.getElementById('emplacement-pub')) {
    var myDiv = document.getElementById('dummy');
    document.getElementById('emplacement-pub').innerHTML = myDiv.innerHTML;
    myDiv.innerHTML = '';
    myDiv.parent.removeChild(myDiv);
}

captain_torche

lundi 1 septembre 2008 à 06:31

Si je ne m'abuse, le fait d'ajouter tes éléments par document.write ne permet pas de pouvoir les récupérer avec IE : ils sont hors du flux DOM, et de par le fait, inaccessibles.
Il faut donc que tu les mettes à jour avec une autre méthode (avec appendChild, ou pour faire plus simple, en utilisant une bibliothèque comme jquery).

adn

lundi 1 septembre 2008 à 11:20

Merci Captain pour la suggestion !

Je viens d'y passer la journée sans succès. J'avais déjà vu JQUERY sans vraiment approfondir et çà à l'air assez sympa à part que la lib est assez grosse à charger.

J'ai simplifié mon exemple. J'essaye juste de déplacer un texte pour commencer simple. Voici le html

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script language='JavaScript' type='text/javascript' src='.../jquery-1.2.6.min.js'/></script>
</head>
<body>
DESTINATION: <div id="pub"></div><br/>
SOURCE<div id"dummy">TEXT TO MOVE !!!</div><br/>
<script language="javascript" src=".../script.js"></script>
</body>
</html>

Mon script

CODE

$(document).ready(function() {
$("#dummy").appendTo("#pub");
});

J'avoue avoir essayer un tas de combinaisons, avec et sans la fonction ready, ou encore en recuperant le code par .html() et en faisant un .append sur $("pub"), mais rien y fait.

captain_torche

lundi 1 septembre 2008 à 11:22

Essaye avec ça, pour voir ?

CODE

$(document).ready(function() {
$("#dummy").appendTo($("#pub"));
});

adn

lundi 1 septembre 2008 à 14:02

Ce n'est pas la syntaxe indiquée, néanmois le test n'est pas plus concluant

captain_torche

lundi 1 septembre 2008 à 14:07

Autant pour moi, je suis un peu rouillé. Le code Jquery semble parfait, c'est juste le code HTML qui merdouille

Il manque un symbole égal ici :

HTML

Ce qui fait que le parser ne reconnait pas d'élément avec un id = dummy, et donc qu'il ne déplace rien

adn

lundi 1 septembre 2008 à 16:52

Merci, l'erreur était enOOOOrme !

Ca marche bien sur les deux navigateurs, JQUERY a ce mérite indépendamment de la taille de la lib. Par contre appliqué aux pubs, çà ne marche pas vraiment. En l'occurrence mon adserver renvoie de l'AdSense, lui-même doit faire un tas de manip sur le html et du coup, la copie marche mais impossible de détruire la DIV dummy, çà finit même sur les 2 navigateurs par des crashs !

J'abandonne mon idée de différer la pub en bas de page, pourtant c'était séduisant. Mais je garde JQUERY sous le coude.

Merci de ton aide

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.