如何将回调脚本置于body标签底部解决Blogger页面阻塞问题

Hey there! Let's fix this blocking issue step by step. The main problems here are twofold: your script uses document.write() which behaves badly when run after the page has finished loading, and the way the JSONP feed is loaded was causing blocking when placed earlier in the page. Here's how to adjust everything to work smoothly at the bottom of your <body>:

Step 1: Update the Display Function to Use DOM Manipulation Instead of document.write() #

document.write() will overwrite your entire page if it runs after the page has loaded (which it will when placed at the bottom). We'll modify the DisplaytheTOC function to build the archive content and insert it into your target container (I'll use your .static_archive div as the example, but you can adjust this to .archive if needed).

Replace your existing DisplaytheTOC function with this:

function DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays) {
  var MonthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var NumberOfEntries = PostTitles.length;
  var currentMonth = "";
  var currentYear = "";
  // Get the target container where we'll insert the archive
  var archiveContainer = document.querySelector('.static_archive');
  // Build the HTML content as a string
  var archiveHTML = '';

  for (var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++) {
    var NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum], 10) - 1];
    if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
      currentMonth = NameOfMonth;
      currentYear = PostYears[EntryNum];
      archiveHTML += "<br><div class='dateStyle'>" + currentMonth + " " + currentYear + "</div>";
    }
    var parsed_day = parseInt(PostDays[EntryNum], 10) > 9 ? "" + parseInt(PostDays[EntryNum], 10) : "0" + parseInt(PostDays[EntryNum], 10);
    archiveHTML += "<div class='dayStyle'>" + parsed_day + ":&nbsp;&nbsp;</div><a href='" + PostURLs[EntryNum] + "'>" + PostTitles[EntryNum] + "</a><br>";
  }

  // Insert the built HTML into the container
  archiveContainer.innerHTML = archiveHTML;
}

Step 2: Move All Scripts to the Bottom of <body> (As You Wanted) #

Now, place all your script code (including the JSONP feed call) right before the closing </body> tag. Your HTML structure will look like this:

<body>
<header>
</header>
<div class="contents">
<div class="blog-posts"></div>
<div class="static_archive">
<!-- Archive will be inserted here automatically -->
</div>
<aside>
<div class="widget1">
<div class="archive"></div>
</div>
</aside>
</div>
<footer>
</footer>
<script>
function LoadTheArchive(TotalFeed) {
var PostTitles = new Array();
var PostURLs = new Array();
var PostYears = new Array();
var PostMonths = new Array();
var PostDays = new Array();
if ("entry" in TotalFeed.feed) {
var PostEntries = TotalFeed.feed.entry.length;
for (var PostNum = 0; PostNum < PostEntries; PostNum++) {
var ThisPost = TotalFeed.feed.entry[PostNum];
PostTitles.push(ThisPost.title.$t);
PostYears.push(ThisPost.published.$t.substring(0, 4));
PostMonths.push(ThisPost.published.$t.substring(5, 7));
PostDays.push(ThisPost.published.$t.substring(8, 10));
var ThisPostURL;
for (var LinkNum = 0; LinkNum < ThisPost.link.length; LinkNum++) {
if (ThisPost.link[LinkNum].rel == "alternate") {
ThisPostURL = ThisPost.link[LinkNum].href;
break
}
}
PostURLs.push(ThisPostURL);
}
}
DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays);
}

// Updated Display function here
function DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays) {
  var MonthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var NumberOfEntries = PostTitles.length;
  var currentMonth = "";
  var currentYear = "";
  var archiveContainer = document.querySelector('.static_archive');
  var archiveHTML = '';

  for (var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++) {
    var NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum], 10) - 1];
    if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
      currentMonth = NameOfMonth;
      currentYear = PostYears[EntryNum];
      archiveHTML += "<br><div class='dateStyle'>" + currentMonth + " " + currentYear + "</div>";
    }
    var parsed_day = parseInt(PostDays[EntryNum], 10) > 9 ? "" + parseInt(PostDays[EntryNum], 10) : "0" + parseInt(PostDays[EntryNum], 10);
    archiveHTML += "<div class='dayStyle'>" + parsed_day + ":&nbsp;&nbsp;</div><a href='" + PostURLs[EntryNum] + "'>" + PostTitles[EntryNum] + "</a><br>";
  }

  archiveContainer.innerHTML = archiveHTML;
}
</script>
<!-- Load the feed asynchronously - this won't block the page now -->
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=150&amp;start-index=1&amp;callback=LoadTheArchive" type="text/javascript">
</script>
</body>

Step 3: Optional: Add a Loading State (For Better UX) #

Since the feed takes a few seconds to load, you can add a loading message to your .static_archive div so visitors know something's happening:

<div class="static_archive">
Loading archive...
</div>

When the script finishes, this text will be replaced with the archive content automatically.

Why This Works #

• By moving the scripts to the bottom, the rest of your page (header, blog posts, aside) loads first without being blocked.
• Using innerHTML instead of document.write() lets us safely insert content into the specific container without messing up the rest of the page.
• The JSONP feed still loads asynchronously, but now it runs after the DOM is fully ready, so the target container exists when we try to access it.

If you want the archive in the .archive widget instead, just change document.querySelector('.static_archive') to document.querySelector('.archive') in the DisplaytheTOC function.

内容的提问来源于stack exchange，提问作者Anivep