Blogger前后文章导航按钮开发：回调函数未定义问题求助

核心问题：回调函数未定义的原因 #

• 你在if代码块内部定义的setOlderPageTitle和setNewerPageTitle属于局部作用域，而JSONP请求的回调要求函数处于全局作用域，因此Feed返回时无法找到对应的回调函数。
• 代码中硬编码Blog1_blog-pager-older-link作为元素ID，但模板里用的是动态生成的expr:id='data:widget.instanceId + "_blog-pager-older-link"'，硬编码会导致无法正确获取元素。
• 原HTML存在<a>标签嵌套<a>的语法错误，不符合HTML规范。

修复后的完整代码 #

模板部分（修正嵌套错误，保留原有结构） #

<a expr:href='data:olderPageUrl'>
  <div class='older-post'>
    <span class='pager-icon'><svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='15 18 9 12 15 6'/></svg></span>
    <span>prev</span>
    <span class='older-text blog-pager-older-link' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
      <data:olderPageTitle/>
    </span>
  </div>
</a>

<a expr:href='data:newerPageUrl'>
  <div class='newer-post'>
    <span class='pager-icon'><svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='9 18 15 12 9 6'/></svg></span>
    <span>next</span>
    <span class='newer-text blog-pager-newer-link' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
      <data:newerPageTitle/>
    </span>
  </div>
</a>

JavaScript部分（修复作用域与元素获取问题） #

/*********** Between Posts Navigation Starts ************/
// 全局定义回调函数，确保JSONP能识别
function setOlderPageTitle(data){
  var olderLink = document.querySelector('.blog-pager-older-link');
  setPageTitle(data, olderLink, '', '');
}

function setNewerPageTitle(data){
  var newerLink = document.querySelector('.blog-pager-newer-link');
  setPageTitle(data, newerLink, '', '');
}

// 页面加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  var olderLink = document.querySelector('.blog-pager-older-link');
  if (olderLink) {
    getPageTitle(olderLink, 'setOlderPageTitle');
  }

  var newerLink = document.querySelector('.blog-pager-newer-link');
  if (newerLink) {
    getPageTitle(newerLink, 'setNewerPageTitle');
  }
});

// 从Feed数据中设置文章标题
function setPageTitle(data, pageLink, prefix, suffix) {
  if (data.feed?.entry?.length > 0) {
    var title = data.feed.entry[0].title.$t;
    if (title) {
      pageLink.textContent = prefix + title + suffix;
    }
  }
}

// 从Blogger Feed获取文章数据
function getPageTitle(pageLink, callbackName) {
  var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
  var script = document.createElement('script');
  // 编码路径，避免特殊字符导致请求失败
  script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path=' + encodeURIComponent(pathname) + '&callback=' + callbackName;
  document.body.appendChild(script);
}
/*********** Between Posts Navigation End ************/

关键修复点说明 #

1. 回调函数全局化：将两个回调函数移至全局作用域，解决JSONP找不到回调的问题。
2. 修正HTML语法错误：移除<a>标签嵌套，改用<span>保留原有样式与属性。
3. 动态元素获取：通过类名document.querySelector获取元素，避免依赖动态生成的ID，提升兼容性。
4. 路径编码处理：添加encodeURIComponent处理文章路径，避免特殊字符导致Feed请求失败。
5. 简化逻辑判断：使用可选链data.feed?.entry?.length简化多层if判断，代码更简洁。

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