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'。但是运行此命令时，我看到了无法理解的行为：
-（Chrome，Opera，Firefox）内容显示在html页面上。
-（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

在加载iframe之前，将触发主页中的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>");
    });
});

但是，我不知道此替换操作。只要内容在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内容时出现无法理解的行为

2 个答案: