时间戳

首页 > 解决方案 > 页面上的所有内容在第一次加载时都没有出现，需要刷新然后才能正常工作

javascript - 页面上的所有内容在第一次加载时都没有出现，需要刷新然后才能正常工作

问题描述

从技术上讲，没有错误，尽管在访问网页时您不想为了加载内容而必须刷新，因此代码没有尽可能高效和流畅地运行。

控制台日志中显示的错误如下：

jquery.min.js:2 Uncaught TypeError: Cannot read property 'length' of null
    at HTMLDocument.<anonymous> (subject-page.html?subjectID=2:375)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

当我单击刷新浏览器按钮时，此错误消失并且一切正常。所以我认为这与加载页面或在不同时间调用某些函数有关，尽管我不太确定并且希望得到任何帮助。

这是确定某些页面内容的 JavaScript

$(document).ready(function() {
  if (getParameterByName('subjectID') > 0) {
    localStorage.setItem("myFutureCurrentSubjectID", getParameterByName('subjectID'));
    getSubject();
    getTopicsForSubject();
    var topicsString = JSON.parse(localStorage.getItem('myFutureTopicsForSubject'));
  } else {
    getSubject();
    getTopicsForSubject();
    var topicsString = JSON.parse(localStorage.getItem('myFutureTopicsForSubject'));
  }
  var userName = localStorage.getItem('myFutureUserName');
  document.getElementById('tabtitle').innerHTML = userName + "'s Future - " + localStorage.getItem('myFutureCurrentSubject');
  document.getElementById('subjectTitle').innerHTML = localStorage.getItem('myFutureCurrentSubject');
  document.getElementById('menuSubjectName').innerHTML = localStorage.getItem('myFutureCurrentSubject');
  localStorage.removeItem('myFutureCurrentTopic');
  if (topicsString.length - 1 >= 1) {
    document.getElementById('topicCard1Title').innerHTML = topicsString[0];
  }
  if (topicsString.length - 1 >= 2) {
    document.getElementById('topicCard2Title').innerHTML = topicsString[1];
  }
  if (topicsString.length - 1 >= 3) {
    document.getElementById('topicCard3Title').innerHTML = topicsString[2];
  }
  if (topicsString.length - 1 >= 4) {
    document.getElementById('topicCard4Title').innerHTML = topicsString[3];
  }
  if (topicsString.length - 1 >= 5) {
    document.getElementById('topicCard5Title').innerHTML = topicsString[4];
  }
  if (topicsString.length - 1 >= 6) {
    document.getElementById('topicCard6Title').innerHTML = topicsString[5];
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

标签： javascripthtmlonloaddocument-ready

解决方案

这只是表明对于 key ，当您加载页面时第一次myFutureTopicsForSubject不存在特定值，因此访问它会返回，这会使您设置为.localStoragenulltopicsStringnull

null尽管在每次后续加载时，即使关闭选项卡或浏览器，您也不能得到，因为localStorage保存该值的范围更广。您要么明确地执行此操作并key从localStorage使用开发人员控制台中删除，要么此处未共享的某些代码部分是有条件地执行此操作。

推荐阅读