1

我有一个简单的脚本即时测试，它调用一个 HTML 文件。在那个 html 文件中是一个 div 的 id "test2"。

然后，我尝试将内容添加到它的 innerHTML 中，但它的行为就像它不存在一样，即使 div 显示在浏览器中。

这就是我接近这个想法的方式：

<script>

function call_file(file,div_id){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(div_id).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",file,true);
xmlhttp.send();

}

window.onload = function() {  

  file = 'test.html';
  div_id = 'test';
  call_file(file,div_id);
  document.getElementById('test2').innerHTML = 'Hi';
};
</script>
  <div id="test" class="outer""></div>

“test.html”的内容：

<div id="test2" class="inner"></div>

"test2"为什么即使我亲眼看到了 div，它也找不到带有此错误的 id ：

Cannot set property 'innerHTML' of null
4

2 回答 2

2

您正在进行异步调用，因此send()将在收到响应并将其添加到 DOM 之前返回。任何依赖于接收数据的代码都应该在您的onreadystatechange函数中，或者以某种方式由它触发，以便在收到响应数据之前它不会执行。

于 2012-10-15T05:24:20.077 回答
1

你不能设置它，因为它还不存在。您需要等到它加载完毕。

您可以使用回调函数来做到这一点。

function call_file(file,div_id, callback){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(div_id).innerHTML=xmlhttp.responseText;
    return callback();
    }
  }
xmlhttp.open("GET",file,true);
xmlhttp.send();

}

window.onload = function() {  

  file = 'test.html';
  div_id = 'test';
  call_file(file,div_id, function () {
   document.getElementById('test2').innerHTML = 'Hi';
  });
};
于 2012-10-15T05:24:00.297 回答