使用jQuery load实现div无刷新重载时布局及文字变小如何解决

问题修复思路 #

• 校验动态返回内容纯度
  当前直接拉取整页后提取#scrip-data节点的逻辑，很容易把整页中的<meta>、全局<style>、<script>标签意外带入目标节点，浏览器解析这些不属于内容区的标签时，可能会覆盖全局的viewport配置、根字体大小等全局属性，直接导致整体布局、文字缩小。
  优先优化方案是单独做一个后端接口，仅返回#scrip-data节点的纯内容，不返回完整页面的head、body等外层结构，从根源避免冗余标签干扰。

• 过滤冗余标签后再插入内容
  如果无法单独做接口，可以在load的回调中对返回内容做清洗，过滤掉可能影响全局的标签，参考代码：

setInterval(function(){
    $.ajaxSetup({ cache: false });
    $('#scrip-data').load(location.href + " #scrip-data", function(responseText){
        // 提取纯内容，过滤script、style、meta等非内容标签
        const pureContent = $(responseText).find('#scrip-data').children().not('script, style, meta');
        $(this).empty().html(pureContent);
    });
}, 30 * 1000);

• 锁死目标节点的基础布局属性
  如果页面使用rem、em等相对单位，根字体属性被意外修改会导致全页面尺寸缩放，可以给目标节点及父级增加固定样式，避免动态内容覆盖：

/* 全局锁死根字体，避免被动态内容修改 */
html {
    font-size: 16px !important; /* 按你实际需要的基准值设置 */
}
/* 锁死目标节点的盒模型和基础属性 */
#scrip-data {
    box-sizing: border-box !important;
    width: 100% !important;
    font-size: inherit !important;
}

• 排查节点嵌套异常
  旧版本jQuery的load方法可能会出现节点重复嵌套的问题，即每次加载后都把新的#scrip-data节点插入到原有节点内部，多层嵌套后样式继承异常导致尺寸缩小，每次替换内容前可以先清空原有节点内容，同时定期检查节点结构是否存在重复id的嵌套问题。

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