{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 我命由我不由天 的问题《Setting background-image with javascript》','https://www.manongdao.com/q-1277390.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
In chrome, safari, and opera setting the background image to an absolute reference such as: "/images/image.png" changes it to "http://sitepath/images/image.png".
It does not do this in firefox.
Is there any way to avoid this behavior, or is it written into the browser's javascript engine? Using jquery to set the background-image also does this problem.
The problem is that I am posting the HTML to a php script that needs the urls in this specific format. I know that setting the image path relative fixes this, but I can't do that.
The only other alternative would be to use a regexp. to convert the urls.
Thanks.
Test this in firefox, and chrome / webkit browser:
<!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>
Not sure exacly how you're putting that location into the document, but you can use
window.location.hostnameto get the domain and prepend that.You would replace
/images/images/logo.gifwith however you generate the image (server-side, I guess?)A better approach would be to change classes on the item such that the new class changed the image to whatever you wanted. Something like:
This is a much cleaner approach that will degrade better and allow proper separation of concerns.
If you have to stick with changing inline CSS, you'll have to use an absolute reference to keep it the same in all browsers.