CSS и JQuery: пробелы в названии картинки взламывают код URL ()
У меня есть страница, которая, как предполагается, отображает увеличенную версию изображения при парении по миниатюре.
У меня есть 'отделение' с идентификатором, и код JQuery как следует:
$(document).ready(function(){
$('img').hover(function() {
var src = $("#im" + this.id).attr("src");
$('#viewlarge').css('backgroundImage','url(' + src +')');
return false;
});
});
Изображения, которые я использую, сгенерированы сценарием Ruby, которые "генерируют" изображение с подобным, все же другим идентификатором. Однако иногда, фотография загружаются, которые имеют "пробелы" внутри. Мои инструменты разработчика говорят мне, что фоновое изображение не установлено правильно, все же канал передачи изображения корректен, и браузер не имеют проблем при нахождении изображения.
Мой вопрос, я могу так или иначе санировать URL 'src', таким образом, пробелы не будут проблемой? Я знаю о выполнении этой стороны сервера, все же я хотел бы знать, как сделать это с JQuery/JS также.
Спасибо!
4 ответа
Недопустимые пробелы в URI. Их необходимо закодировать как % 20 .
Вы можете src.replace (/ / g, '% 20') или, в более общем смысле, encodeURI (src) на % -encode all символы, недопустимые в URI. encodeURIComponent (src) является более распространенным, но он будет работать только в том случае, если src будет просто одним относительным именем файла; в противном случае он закодировал бы / и остановил бы работу путей.
Однако реальная проблема в том, что исходный img src уже сломан и работает только благодаря исправлениям браузера, исправляющим вашу ошибку. Вам нужно исправить сценарий Ruby, генерирующий страницу. Вы должны использовать URL-кодировку имени файла перед включением его в путь; есть еще много символов, которые могут вызвать проблемы, чем просто пробел.
Как сказал Пекка, вы также должны заключать URL в кавычки в значении url (...) . Хотя вы можете обойтись без них для многих URL-адресов, некоторые символы должны быть экранированы \ . Использование двойных кавычек означает, что вы можете этого избежать (двойные кавычки не могут появляться в самом URL).
Добавление кавычек вокруг URL-адреса должно помочь:
$('#viewlarge').css('backgroundImage','url("' + src +'")');
однако, согласно Согласно спецификациям W3C пробелы должны быть экранированы, поэтому решение для кодирования URL, предоставленное @Andy E's head @bobince, является самым безопасным.
- Во-первых, почему вы позволяете клиентам определять имена ваших изображений?
- Во-вторых, почему вы их не дезинфицируете?
- В-третьих, я подозреваю, что вы не кодируете URL-адрес URL-адреса, когда вы пишете их в html (что превратит пробел в% 20)
Используйте Javascript encode для кодирования вашего ' src '
Например.
$('#viewlarge').css('backgroundImage','url(' + encode(src) +')');
Думаю, вы также можете использовать функцию Javascript « escape »
$('#viewlarge').css('backgroundImage','url(' + escape(src) +')');