jQuery使用load加载内容到DIV的两个问题：全页覆盖、父页JS变量访问

两个需求都可以实现，对应的解决方案如下：

问题1：加载内容覆盖整个页面的修复 #

该问题绝大多数场景是因为你绑定点击事件的#about元素是<a>标签，点击时触发了默认的页面跳转行为，直接跳转到了/about.html而不是走AJAX加载逻辑，修复方法如下：

1. 在点击事件回调中阻止默认行为，修改后的代码示例：

$(document).ready( function() {
    var data = 'testing'
    $("#about").on("click", function(e) {
        // 新增这一行，阻止元素默认行为（比如a标签的跳转）
        e.preventDefault();
        $("#main-content").load("/about.html");
    });
});

2. 额外排查点：

• 确认当前页面id为main-content的元素唯一存在，id没有拼写错误
• 检查about.html内部是否包含document.write、主动跳转页面的代码，如果有需要对应删除或修改。

问题2：about.html访问父页面变量的实现 #

你当前定义的data是$(document).ready回调函数内的局部变量，外部作用域无法访问，只要调整变量的作用域即可：

1. 把data变量挂载到全局window对象上，修改代码：

$(document).ready( function() {
    // 把变量挂载到全局window，所有同页面下的脚本都可以访问
    window.data = 'testing'
    $("#about").on("click", function(e) {
        e.preventDefault();
        $("#main-content").load("/about.html");
    });
});

2. 调整后，about.html内部的脚本直接访问data或者window.data就可以拿到对应的值，不需要额外配置。

补充：如果需要在about页面内容完全加载完成后再执行逻辑，可以给load方法加回调函数：

$("#main-content").load("/about.html", function() {
  // 此处写加载完成后的执行逻辑
});

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