Javascript：访问 iframe 内容时出现无法理解的行为

Question

我有以下 html 代码：

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

... 和 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' 替换为
。但是当运行这个时候我看到了难以理解的行为：
- html 页面上显示的（Chrome、Opera、Firefox）内容。
- (Chrome, Opera) 警报 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

主页中的 DOMContentLoaded 事件在加载 iframe 之前触发。您应该使用 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>");
    });
});

但是，我想知道这个替换操作。只要内容在 HTML 元素之间有换行符，而不仅仅是在它们的文本中，这将添加一个 <br>。其中一些可能在无效的地方，例如

<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">

Answer 2

我找到了使用 ajax 且不使用 iframe 来加载我需要的文件的替代方法。也许对某些人来说它可能有用。这样就不需要用 '
' 替换 '\n' - 内容显示正确。 HTML代码：

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

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");
});

Javascript：访问 iframe 内容时出现无法理解的行为

Javascript: Incomprehensible behavior when acessing iframe content

html

javascript

iframe

cross-browser