Question

您好我正在尝试加载内容并在页面上转储json：的的index.html

A <- matrix( c( 1 , 3 , 7 , 1 , 8 , 2 ) , 3 , 2 , byrow = TRUE )

a<-c(3,1,2)

f<-function(i1){
 rep(A[i1,],a[i1])
}

matrix(unlist(sapply(1:3,f)),ncol=2,byrow=TRUE)

main.js

<html>
  <head>
  <title>Learning</title>
  <style type="text/css">
  body { background-color: #ddd; }
  #container { height: 100%; width: 100%; display: table; }
  #inner { vertical-align: middle; display: table-cell; }
  #gauge_div { width: 120px; margin: 0 auto; }
</style>
  </head>
  <body id="body">
    <script src="main.js"></script>
    <div id="animal-info"></div>
  </body>
</html>

所以我希望它应该在页面加载时打印＆＃34;测试123＆＃34; ，但它既没有给出错误也没有显示任何内容

Answer 1

您需要使用document ready statement

$(document).ready(function(){
    console.log('this is run on page load');
    myFunction();
});

Answer 2

传递给addEventListener的事件类型应该没有on前缀。而不是addEventListener("onload", function () {使用addEventListener("load", function () {。

此外，您将事件侦听器附加到变量body，但此变量未在代码中定义。如果文档中存在id="body"元素（向后兼容的浏览器行为），它仍然可以工作，但我不会依赖此功能。

Answer 3

最佳解决方案是将整个代码包装在下面;

document.addEventListener("DOMContentLoaded", function(event) { 
  //do stuff here
});

这将在DOM完成加载时执行所有代码。几乎所有的浏览器都支持这种功能，但那些不再使用的浏览器，如IE8。

你也可以这样做只是为了调用函数，但是一些获取DOM元素的变量如果还没有加载则可能无法正确获取节点。

完整的JS例如，也在JSFiddle中测试过。工作正常。

document.addEventListener("DOMContentLoaded", function(event) { 
  var animalContainer = document.getElementById("animal-info");

  var ourRequeast = new XMLHttpRequest();
  var loaded = document.getElementById("body");

  ourRequeast.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
    ourRequeast.onload = function() {
    // console.log(ourRequeast.responseText);
    // var ourData = ourRequeast.responseText;
    var ourData = JSON.parse(ourRequeast.responseText);
    //console.log(ourData[0])

    renderHTML(ourData);
  }
  ourRequeast.send();

  function renderHTML(data){
      animalContainer.insertAdjacentHTML('beforeend', 'testing 123');
  }
});

在页面加载时运行ajax函数

3 个答案: