<pre> тег теряет разрывы строк при установке innerHTML в IE - PullRequest
Новая
       31

<pre> тег теряет разрывы строк при установке innerHTML в IE

11 голосов
/ 16 января 2009

Я использую Prototype's PeriodicalUpdater для обновления div с результатами вызова ajax. Насколько я понимаю, div обновляется установкой его innerHTML.

Div заключен в тег <pre>. В Firefox форматирование <pre> работает, как и ожидалось, но в IE весь текст заканчивается одной строкой.

Вот пример кода, найденного здесь , который иллюстрирует проблему. В Firefox abc находится на линии, отличной от def; в IE это на одной линии. 

<code>    <html>
    <head>
      <title>IE preformatted text sucks</title>
    </head>
    <body>
      <pre id="test">
        a b c
        d e f
<! - var textContent = document.getElementById ("test"). innerText; textContent = textContent.replace ("a", "<span style = \" color: red; \ "> a "); document.getElementById ("test"). style.whiteSpace = "pre"; document.getElementById ("test"). innerHTML = textContent; ->

Кто-нибудь знает способ обойти эту проблему?

Ответы [ 5 ]

17 голосов
/ 16 января 2009

Установка innerHTML запускает анализатор HTML, который игнорирует лишние пробелы, включая жесткие возвраты. Если вы измените свой метод, чтобы включить 

tag in the string, it works fine because the HTML parser retains the hard returns.

You can see this in action by doing a View Generated Source after you run your sample page:

a b c d e f

Здесь вы видите, что жесткий возврат больше не является частью содержимого тега 

.
6 голосов
/ 15 декабря 2009

или вы могли бы 

if (el.innerText) {
    el.innerText = val;
} else {
    el.innerHTML = val;
}
5 голосов
/ 16 января 2009

Как правило, вы получите более согласованные результаты, используя методы DOM для создания динамического контента, особенно если вам нужны такие тонкие вещи, как нормализация пробелов. Однако, если вы используете для этого innerHTML, существует обходной путь для IE, который заключается в использовании атрибута outerHTML и включении в него тегов. 

<code>if(test.outerHTML)
    test.outerHTML = '<pre id="test">'+textContent+'
'; еще test.innerHTML = textContent;

Этот обходной путь и другие обсуждения можно найти здесь: Вставка новой строки в предварительный тег (IE, Javascript)

1 голос
/ 09 мая 2012

Не знаю, предлагалось ли это ранее, но решение, которое я нашел для сохранения пробелов, новых строк и т. Д. При выполнении innerHTML в теге «pre», заключается в вставке другого тега «pre» в текст: 1001 * 

<code><pre id="pretag">
TextToInsert = "много текста с пробелами и символами новой строки"; document.getElementById ("pretag"). innerHTML = "
" + TextToInsert + "
";

Кажется И.Е. разбирает текст перед выполнением innerHTML. Вышеуказанное заставляет синтаксический анализатор оставлять текст внутри дополнительного тега «pre» непарсированным. Имеет смысл, так как это то, что парсер должен делать. также работает с FF.

0 голосов
/ 12 марта 2010

Также можно переписать «путь Python», т.е.

el.innerText && el.innerText = val || el.innerHTML = val;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...