Configuration de l'image d'arrière-plan avec javascript

En mode chrome, safari et opéra, l'image d'arrière-plan avec une référence absolue telle que: "/images/image.png" la change en "http://sitepath/images/image.png".Configuration de l'image d'arrière-plan avec javascript

Cela ne se fait pas dans Firefox.

Est-il possible d'éviter ce comportement ou est-il écrit dans le moteur javascript du navigateur? L'utilisation de jquery pour définir l'image de fond pose également ce problème.

Le problème est que je poste le HTML à un script php qui a besoin des URL dans ce format spécifique. Je sais que régler le chemin de l'image relatif corrige cela, mais je ne peux pas le faire.

La seule autre alternative serait d'utiliser une regexp. convertir les URL.

Merci.

Test cette dans firefox et chrome/navigateur webkit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<body> 
<div style="height:400px;width:400px;background-image:url(/images/images/logo.gif);"> 
</div> 
<br /> 
<br /> 
<div id="test" style="height:400px;width:400px;"> 
</div> 
<script type="text/javascript" src="/javascripts/jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#test").css('background-image',"url(/images/images/logo.gif)"); 
     alert(document.getElementById('test').style.backgroundImage); 
    }); 
</script> 
</body> 
</html>

Source

2010-05-01 Mattoe3k

Personnellement, je ne voudrais pas essayer de compter sur quelque chose comme ça en premier lieu. J'ai essayé 4 navigateurs, et tous donnent un résultat légèrement différent. – goat

Je ne sais pas comment exacly vous mettez cet endroit dans le document, mais vous pouvez utiliser window.location.hostname pour obtenir le domaine et que préfixer.

var bgImg = window.location.hostname + '/images/images/logo.gif'; 
$("#test").css('background-image', 'url('+bgImg+')');

Vous remplacerez /images/images/logo.gif avec cependant vous générez l'image (côté serveur, je suppose?)

Source

2010-05-01 16:46:36 DisgruntledGoat

serait une meilleure approche de changer de classe sur l'élément de telle sorte que la nouvelle classe a changé l'image tout ce que tu voulais. Quelque chose comme:

$("#test").addClass("newClass");

Ceci est une approche beaucoup plus propre qui se dégrade mieux et permet une séparation appropriée des préoccupations.

Si vous devez vous contenter de modifier les CSS en ligne, vous devrez utiliser une référence absolue pour conserver la même chose dans tous les navigateurs.

$("#test").css("background", "url(" + window.location.hostname + "/logo.gif)");

Source

2010-05-01 17:01:51 sohtimsso1970

needs '') in url – CoR

Merci, je l'ai corrigé. – sohtimsso1970

C'est vraiment la meilleure solution, car elle évite non seulement les problèmes avec les chemins relatifs et absolus, mais donne aussi une meilleure séparation des préoccupations. – lanoxx

-1

$('#divID').css("background-image", "url(/myimage.jpg)");

Source

2014-07-11 15:20:50

Configuration de l'image d'arrière-plan avec javascript

Répondre

Questions connexes