Блог

Главная - Вопросы по программированию - Почему расположение моего строкового объявления влияет на то, будут ли мои объекты в html-кодировке отображаться правильно?

Почему расположение моего строкового объявления влияет на то, будут ли мои объекты в html-кодировке отображаться правильно?

#javascript

#javascript

Вопрос:

При добавлении новой функции в веб-приложение мне нужно динамически устанавливать значение объекта Button. Бывает, что мне нужно вставить в значение некоторые символы Unicode в html-кодировке. При реализации этого я обнаружил, что расположение, в котором я определяю символы, определяет, будут ли они отображаться правильно. Если я определяю символ в самом событии onclick, этот символ отображается правильно. Если я определяю это в функции или на верхнем уровне, оно отображается как буквенный текст.

Я перенес свою проблему в следующий пример HTML / JS (обратите внимание, что моя основная проблема — символы Unicode, но я использую lt / gt в качестве примеров):

 <html><body>
<script type="text/javascript">
    var tlabel3 = 'amp;> foo amp;<';
    function ChangeName2() {
        document.getElementById('button2').value = 'amp;> foo amp;<';
    }
    function ChangeName3() {
        document.getElementById('button3').value = tlabel3;
    }
    function ChangeName4(label4) {
        document.getElementById('button4').value = label4;
    }
</script>
<input type=button id=button1 value="amp;< foo amp;>"> - <a href=# onclick="document.getElementById('button1').value = 'amp;> foo amp;<'">Clicky</a>
<HR>
<input type=button id=button2 value="amp;< foo amp;>"> - <a href=# onclick="ChangeName2()">Clicky</a>
<HR>
<input type=button id=button3 value="amp;< foo amp;>"> - <a href=# onclick="ChangeName3()">Clicky</a>
<HR>
<input type=button id=button4 value="amp;< foo amp;>"> - <a href=# onclick="ChangeName4('amp;> foo amp;<')">Clicky</a>
</body></html>

В моих тестах в IE8, Safari, Chrome и FF3.6 это ведет себя одинаково — кнопки 1 и 4, которые имеют символы, определенные в обработчике onclick, работают правильно. Кнопки 2 и 3, содержащие символы, определенные в другом месте, отображают литеральную amp;> строку.

Мой вопрос в том, почему местоположение определения строки имеет значение? У меня есть обходной путь, но поскольку все четыре браузера работают одинаково, я чувствую, что мне не хватает знаний о некоторых фундаментальных принципах работы Javascript.

Спасибо

Ответ №1:

При использовании таких вещей, как > и amp; < на уровне HTML, они отображаются там, поэтому они становятся > и < . На уровне javascript это просто строка, и она не отображается как HTML (его javascript).

Вы можете увидеть, что происходит, изменив код первой кнопки на:

 <a href="javascript:document.getElementById('button1').value = 'amp;> foo amp;<'">Clicky</a>

Таким образом, при наведении курсора мыши на ссылку и проверке строки состояния вашего браузера вы увидите символы > и < вместо > и < . Это означает, что браузер уже отрисовал его, потому что он находится внутри HTML-кода.

Чтобы получить те же результаты, что и в javascript, правильным было бы выполнить amp;amp; > Или просто поместить > < в javascript.

Комментарии:

1. Дерьмо. Я знал, что это будет очевидно. Я действительно видел то, что вы упомянули в firebug, я просто не понял смысла.

2. Для получения бонусных баллов, есть ли render () или аналогичная функция, которую можно вызвать из javascript, чтобы превратить ‘<‘ в < ?

3. Эй, @ jj33, я не знаю, есть ли встроенная функция, которая это делает. Но есть своего рода известная библиотека, которая делает это здесь: strictly-software.com/htmlencode Там есть функция html_decode (), я думаю, именно то, что вам нужно