Je veux créer un simple morceau de code JS qui crée un élément d'image en arrière-plan et n'affiche rien. L'élément d'image appellera une URL de suivi (telle qu'Omniture) et doit être simple et robuste et fonctionner uniquement dans IE 6 = <. Voici le code que j'ai:
var oImg = document.createElement("img");
oImg.setAttribute('src', 'http://www.testtrackinglink.com');
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);
Est-ce le moyen le plus simple mais le plus robuste (sans erreur) de le faire?
Je ne peux pas utiliser un framework comme jQuery. Il doit être en JavaScript brut.
javascript
dhtml
Pete
la source
la source
Réponses:
px
est pour CSS uniquement. Utilisez soit:pour définir une largeur via HTML, ou:
pour le définir via CSS.
Notez que les anciennes versions d'IE ne créent pas une image appropriée avec
document.createElement()
, et les anciennes versions de KHTML ne créent pas un nœud DOM approprié avecnew Image()
, donc si vous voulez être entièrement rétrocompatible, utilisez quelque chose comme:Méfiez-vous également un peu
document.body.appendChild
si le script peut s'exécuter car la page est en cours de chargement. Vous pouvez vous retrouver avec l'image dans un endroit inattendu, ou une erreur JavaScript étrange sur IE. Si vous avez besoin de pouvoir l'ajouter au moment du chargement (mais après le<body>
démarrage de l' élément), vous pouvez essayer de l'insérer au début du corps en utilisantbody.insertBefore(body.firstChild)
.Pour ce faire de manière invisible tout en conservant l'image chargée dans tous les navigateurs, vous pouvez insérer un élément absolument positionné hors de la page en
<div>
tant que premier enfant du corps et y placer toutes les images de suivi / préchargement que vous ne voulez pas voir. .la source
new Image()
fonctionnerait -il pas mieux en toutes circonstances?la source
la source
console.log
entre chaque paire de lignes, afin que vous sachiez exactement quelle ligne la bloque.jQuery:
J'ai trouvé que cela fonctionne encore mieux parce que vous n'avez pas à vous soucier du HTML qui échappe à quoi que ce soit (ce qui devrait être fait dans le code ci-dessus, si les valeurs n'étaient pas codées en dur). C'est aussi plus facile à lire (du point de vue JS):
la source
<img ... />
dans DOM, faites-le avec innerHTML alors. Je ne comprends tout simplement pas ceci: /Par souci d'exhaustivité, je suggérerais également d'utiliser la méthode InnerHTML - même si je ne l'appellerais pas la meilleure façon ...
Au fait, innerHTML n'est pas si mal
la source
Chemin le plus court:
la source
Êtes-vous autorisé à utiliser un framework? jQuery et Prototype rendent ce genre de chose assez facile. Voici un exemple en prototype:
la source
vous pouvez simplement faire:
Facile :)
la source
Juste pour ajouter un exemple JS HTML complet
la source
Comme d'autres l'ont souligné, si vous êtes autorisé à utiliser un framework comme jQuery, la meilleure chose à faire est de l'utiliser, car il le fera probablement de la meilleure façon possible. Si vous n'êtes pas autorisé à utiliser un framework, je suppose que manipuler le DOM est la meilleure façon de le faire (et à mon avis, la bonne façon de le faire).
la source
C'est la méthode que je suis pour créer une boucle de balises img ou une seule balise à votre guise
ou
la source