<header>与<footer>多页面共享复用调用时返回undefined问题求助

问题根因 #

你遇到的返回undefined问题，核心是$.get属于异步AJAX请求：

• 外层importHTMLdata函数执行时，只是发起了请求，不会等待请求返回就会直接结束执行，你没有给外层函数定义返回值，默认就会返回undefined
• 回调函数里的return html_string只会将值返回给回调函数本身，不会传递给外层的importHTMLdata函数
  另外你当前用document.write的调用方式也不适合配合异步逻辑，同步执行到document.write时请求还没拿到返回结果。
  补充说明：你贴出的importHTMLdata函数代码末尾漏写了闭合的}，属于笔误需要补上。

解决方案 #

方案1：同步请求（仅适合简单场景，不推荐） #

将异步请求改为同步请求，阻塞页面等待请求返回后再继续执行，修改importHTMLdata代码如下：

function importHTMLdata(path){
    let htmlResult = '';
    $.ajax({
        url: path,
        async: false, // 关闭异步，开启同步模式
        success: function(html_string) {
            console.log(html_string);
            htmlResult = html_string;
        }
    });
    return htmlResult;
}

修改后你原有document.write(importHTMLdata("content/basement.html"))的调用逻辑可以正常运行，缺点是同步请求会卡住页面渲染，直到请求完成才会继续执行后续逻辑，用户体验差。

方案2：异步DOM插入（推荐） #

放弃document.write，改用回调内直接操作DOM插入内容的方式，不会阻塞页面运行：

1. 先修改importHTMLdata函数：

function importHTMLdata(path, targetEle) {
    $.get(path, function(html_string) {
        console.log(html_string);
        // 将获取到的HTML直接插入到目标节点中
        document.querySelector(targetEle).innerHTML = html_string;
    });
}

2. 修改main.html的调用逻辑，提前在需要插入footer的位置放占位节点：

<!-- footer插入位置的占位节点 -->
<div id="footer-wrap"></div>
<script>
// 传入文件路径和占位节点选择器
importHTMLdata("content/basement.html", "#footer-wrap");
</script>

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