Javascript: непонятное поведение при доступе к контенту iframe

Question

У меня следующий HTML-код:

<code><pre id="js-code"><iframe src="sass/main.sass.html" frameborder="0" id="c-frame"></iframe>

... и js:

document.addEventListener('DOMContentLoaded', function(){

  var code = window.frames[0].document.body.innerHTML;
  alert(window.frames[0].document.body.innerHTML);

  alert(document.getElementById("c-frame").contentDocument.body.innerHTML);
  alert(document.getElementById("c-frame").contentDocument.body.innerHTML.indexOf('\n'));
  document.getElementById("c-frame").contentDocument.body.innerHTML = document.getElementById("c-frame").contentDocument.body.innerHTML.replace(/\n/g, '<br>');


});

Я хочу получить содержимое iframe и заменить '\ n'с
.Но я вижу непонятное поведение при запуске этого:
- (Chrome, Opera, Firefox) содержимое отображается на html-странице.
- (Chrome, Opera) alert 1: '';предупреждение 2: '';предупреждение 3: «-1»;замена не работает;
- (Firefox 64.0) предупреждение 1: '';предупреждение 2: '';предупреждение 3: «28»;замена работы;
Примечание: в Firefox работает этот код:

  document.addEventListener('DOMContentLoaded', function(){

  alert(document.getElementById("c-frame").contentDocument.body.innerHTML.indexOf('\n'));
  document.getElementById("c-frame").contentDocument.body.innerHTML = document.getElementById("c-frame").contentDocument.body.innerHTML.replace(/\n/g, '<br>');


});

вызвал предупреждение с результатом '-1', но замена сработала.

Этот код проверен как локальный файл, запущенный вбраузер, с синхронизацией браузера и на удаленном сервере - результаты были похожи.

Answer 1

Я нашел альтернативный способ загрузки файлов, что мне нужно, используя ajax и без iframe.Может быть, для кого-то это может быть полезно.Таким образом, замена '\ n' на '
' не требуется - содержимое отображается правильно.HTML-код:

<code><pre id="js-code">

JS-код:

function loadFile(file) {

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

      var codeHolder = document.getElementById("js-code");          
      codeHolder.innerHTML = this.responseText;          
    }        
  };

  xhttp.open("GET", file, true);
  xhttp.send();
}

document.addEventListener('DOMContentLoaded', function(){
   loadFile("sass/main.sass.html");
});

Answer 2

Событие DOMContentLoaded на главной странице запускается до загрузки фреймов.Вам следует использовать событие iframe DOMContentLoaded.

document.addEventListener('DOMContentLoaded', function(){
    var iframe = document.getElementById("c-frame").contentDocument;
    iframe.addEventListener('DOMContentLoaded', function() {
        this.body.innerHTML = this.body.innerHTML.replace(/\n/g, "<br>");
    });
});

Однако мне интересно узнать об этой операции замены.Это добавит <br> всякий раз, когда в содержании есть новые строки между элементами HTML, а не только в их тексте.Некоторые из них, вероятно, будут в недопустимых местах, например,

<table>
<tr>
<td>Cell contents</td>
</tr>
</table>

станет:

<table><br><tr><br><td>Cell contents</td><br></tr><br></table>

И если у вас есть какие-либо элементы HTML, которые разбиты по строкам, он поместит <br> внутри:

<input type="text"
       name="foo">

станет

<input type="text" <br> name="foo">